{"id":15542951,"url":"https://github.com/onechiporenko/ember-cross-models-routing","last_synced_at":"2026-01-24T02:09:48.667Z","repository":{"id":57223608,"uuid":"70518417","full_name":"onechiporenko/ember-cross-models-routing","owner":"onechiporenko","description":"Cross models routing","archived":false,"fork":false,"pushed_at":"2024-10-01T02:33:52.000Z","size":314,"stargazers_count":0,"open_issues_count":10,"forks_count":1,"subscribers_count":3,"default_branch":"master","last_synced_at":"2024-10-03T12:27:19.540Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://onechiporenko.github.io/ember-cross-models-routing/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/onechiporenko.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2016-10-10T18:50:17.000Z","updated_at":"2016-11-06T13:05:19.000Z","dependencies_parsed_at":"2024-06-06T03:41:00.744Z","dependency_job_id":"ff3040c4-23ea-49c4-98f6-2d9ba1acb84b","html_url":"https://github.com/onechiporenko/ember-cross-models-routing","commit_stats":{"total_commits":12,"total_committers":3,"mean_commits":4.0,"dds":"0.16666666666666663","last_synced_commit":"456b24580f4a81663315fcf501d67452e6882179"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/onechiporenko%2Fember-cross-models-routing","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/onechiporenko%2Fember-cross-models-routing/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/onechiporenko%2Fember-cross-models-routing/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/onechiporenko%2Fember-cross-models-routing/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/onechiporenko","download_url":"https://codeload.github.com/onechiporenko/ember-cross-models-routing/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":250477828,"owners_count":21437049,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-10-02T12:25:00.018Z","updated_at":"2026-01-24T02:09:43.648Z","avatar_url":"https://github.com/onechiporenko.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Ember-cross-models-routing\n\n[![Build Status](https://travis-ci.org/onechiporenko/ember-cross-models-routing.svg?branch=master)](https://travis-ci.org/onechiporenko/ember-cross-models-routing)\n[![Codacy Badge](https://api.codacy.com/project/badge/Grade/b1d0d3eefdf3424db5f74b5f4ae4ad7f)](https://www.codacy.com/app/cv_github/ember-cross-models-routing?utm_source=github.com\u0026amp;utm_medium=referral\u0026amp;utm_content=onechiporenko/ember-cross-models-routing\u0026amp;utm_campaign=Badge_Grade)\n[![Ember Observer Score](https://emberobserver.com/badges/ember-cross-models-routing.svg)](https://emberobserver.com/addons/ember-cross-models-routing)\n[![npm version](https://badge.fury.io/js/ember-cross-models-routing.png)](http://badge.fury.io/js/ember-cross-models-routing)\n[![License](http://img.shields.io/:license-mit-blue.svg)](http://doge.mit-license.org)\n[![Downloads](http://img.shields.io/npm/dm/ember-cross-models-routing.svg)](https://www.npmjs.com/package/ember-cross-models-routing)\n\n## Install\n\n```bash\nember install ember-cross-models-routing\n```\n\n## Usage\n\nSee [demo](http://onechiporenko.github.io/ember-cross-models-routing/) site\n\nAnd small demo gif \u003csmall\u003e(by [ScreenToGif](https://github.com/NickeManarin/ScreenToGif))\u003c/small\u003e\n\n![Demo](demo.gif)\n\n### Give me the code!\n\nOK. Let's look at the example bellow.\n\nThere is a model called `user`. It represents one of the WoW persons (don't ask why it called `user`). Its fields `locations`, `affiliation` and `classes` are arrays of strings. Each field is shown on the its own page. As you can see on the top gif, vertical menu is for users and top menu is for their fields. `ember-cross-models-routing` allows to navigate across models with preservation of the child route. If you are on the Malfurion's Locations and then click on Thrall, you'll be moved to the Thrall's Locations. \n\n```javascript\n// app/models/user.js\n\nimport DS from 'ember-data';\n\nexport default DS.Model.extend({\n\n  name: DS.attr('string'),\n  locations: DS.attr(),\n  affiliation: DS.attr(),\n  classes: DS.attr()\n\n});\n```\n\n```javascript\n// app/router.js\n\nimport Ember from 'ember';\nimport config from './config/environment';\n\nconst Router = Ember.Router.extend({\n  location: config.locationType,\n  rootURL: config.rootURL\n});\n\nRouter.map(function() {\n  this.route('users', function() {\n    this.route('user', {path: ':user_id'}, function() {\n      this.route('locations');\n      this.route('affiliation');\n      this.route('classes');\n    });\n  });\n});\n\nexport default Router;\n```\n\n\n```javascript\n// app/routes/users.js\n\nimport Ember from 'ember';\nconst {get} = Ember;\n\nexport default Ember.Route.extend({\n\n  model() {\n    return get(this, 'store').findAll('user');\n  }\n\n});\n```\n\n```javascript\n// app/routes/users/user.js\n\nimport Ember from 'ember';\nconst {get} = Ember;\n\nexport default Ember.Route.extend({\n\n  model(user) {\n    return get(this, 'store').findRecord('user', user.user_id);\n  }\n\n});\n```\n\n```javascript\n// app/routes/users/user/index.js\n\nimport Ember from 'ember';\nimport CrossModelsRoutingParent from 'ember-cross-models-routing/mixins/cross-models-routing-parent';\n\nexport default Ember.Route.extend(CrossModelsRoutingParent, {\n\n  defaultChild: 'users.user.classes'\n\n});\n```\n\n```javascript\n// app/routers/users/user/classes.js\n\nimport Ember from 'ember';\nimport CrossModelsRoutingChild from 'ember-cross-models-routing/mixins/cross-models-routing-child';\n\nexport default Ember.Route.extend(CrossModelsRoutingChild, {\n\n  parentRouteToCross: 'users.user.index'\n\n});\n```\n\n```handlebars\n{{! app/templates/users.hbs }}\n\n\u003cdiv class=\"row\"\u003e\n  \u003cdiv class=\"col-md-2 col-lg-2\"\u003e\n    \u003cul class=\"nav nav-pills nav-stacked users\"\u003e\n      {{#each model as |user|}}\n        {{#link-to \"users.user.index\" user tagName=\"li\" current-when=\"users.user\"}}\n          {{#link-to \"users.user.index\" user}}{{user.name}}{{/link-to}}\n        {{/link-to}}\n      {{/each}}\n    \u003c/ul\u003e\n  \u003c/div\u003e\n  \u003cdiv class=\"col-md-10 col-lg-10\"\u003e\n    {{outlet}}\n  \u003c/div\u003e\n\u003c/div\u003e\n```\n\n```handlebars\n{{! app/templates/users/user.hbs }}\n\n\u003cul class=\"nav nav-tabs\"\u003e\n  {{#link-to \"users.user.classes\" model tagName=\"li\"}}\n      {{#link-to \"users.user.classes\" model class=\"classes\"}}Classes{{/link-to}}\n    {{/link-to}}\n    {{#link-to \"users.user.affiliation\" model tagName=\"li\"}}\n      {{#link-to \"users.user.affiliation\" model class=\"affiliation\"}}Affiliation{{/link-to}}\n    {{/link-to}}\n    {{#link-to \"users.user.locations\" model tagName=\"li\"}}\n      {{#link-to \"users.user.locations\" model class=\"locations\"}}Locations{{/link-to}}\n    {{/link-to}}\n\u003c/ul\u003e\n\n\u003ch2\u003e{{model.name}}\u003c/h2\u003e\n{{outlet}}\n```\n\n```handlebars\n{{! app/templates/users/user/classes.hbs }}\n\n\u003cul\u003e\n  {{#each model.classes as |c|}}\n    \u003cli\u003e{{c}}\u003c/li\u003e\n  {{/each}}\n\u003c/ul\u003e\n```\n\n```handlebars\n{{! app/templates/users/user/locations.hbs }}\n\n\u003cul\u003e\n  {{#each model.locations as |l|}}\n    \u003cli\u003e{{l}}\u003c/li\u003e\n  {{/each}}\n\u003c/ul\u003e\n```\n\n```handlebars\n{{! app/templates/users/user/affiliation.hbs }}\n\n\u003cul\u003e\n  {{#each model.affiliation as |a|}}\n    \u003cli\u003e{{a}}\u003c/li\u003e\n  {{/each}}\n\u003c/ul\u003e\n```","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fonechiporenko%2Fember-cross-models-routing","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fonechiporenko%2Fember-cross-models-routing","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fonechiporenko%2Fember-cross-models-routing/lists"}