Ember-cross-models-routing
Install
ember install ember-cross-models-routing
Usage
See demo site
And small demo gif (by ScreenToGif)
Give me the code!
OK. Let's look at the example bellow.
There 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.
// app/models/user.js ; Model;
// app/router.js ;; const Router = EmberRouter; Router; ;
// app/routes/users.js ;const get = Ember; Route;
// app/routes/users/user.js ;const get = Ember; Route;
// app/routes/users/user/index.js ;; Route;
// app/routers/users/user/classes.js ;; Route;
{{! app/templates/users.hbs }} <div class="row"> <div class="col-md-2 col-lg-2"> <ul class="nav nav-pills nav-stacked users"> {{#each model as |user|}} {{#link-to "users.user.index" user tagName="li" current-when="users.user"}} {{#link-to "users.user.index" user}}{{user.name}}{{/link-to}} {{/link-to}} {{/each}} </ul> </div> <div class="col-md-10 col-lg-10"> {{outlet}} </div></div>
{{! app/templates/users/user.hbs }} <ul class="nav nav-tabs"> {{#link-to "users.user.classes" model tagName="li"}} {{#link-to "users.user.classes" model class="classes"}}Classes{{/link-to}} {{/link-to}} {{#link-to "users.user.affiliation" model tagName="li"}} {{#link-to "users.user.affiliation" model class="affiliation"}}Affiliation{{/link-to}} {{/link-to}} {{#link-to "users.user.locations" model tagName="li"}} {{#link-to "users.user.locations" model class="locations"}}Locations{{/link-to}} {{/link-to}}</ul> <h2>{{model.name}}</h2>{{outlet}}
{{! app/templates/users/user/classes.hbs }} <ul> {{#each model.classes as |c|}} <li>{{c}}</li> {{/each}}</ul>
{{! app/templates/users/user/locations.hbs }} <ul> {{#each model.locations as |l|}} <li>{{l}}</li> {{/each}}</ul>
{{! app/templates/users/user/affiliation.hbs }} <ul> {{#each model.affiliation as |a|}} <li>{{a}}</li> {{/each}}</ul>