Nonsense Parser Microframework

    ember-cross-models-routing

    1.0.1 • Public • Published

    Ember-cross-models-routing

    Build Status Codacy Badge Ember Observer Score npm version License Downloads

    Install

    ember install ember-cross-models-routing

    Usage

    See demo site

    And small demo gif (by ScreenToGif)

    Demo

    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
     
    import DS from 'ember-data';
     
    export default DS.Model.extend({
     
      name: DS.attr('string'),
      locations: DS.attr(),
      affiliation: DS.attr(),
      classes: DS.attr()
     
    });
    // app/router.js
     
    import Ember from 'ember';
    import config from './config/environment';
     
    const Router = Ember.Router.extend({
      location: config.locationType,
      rootURL: config.rootURL
    });
     
    Router.map(function() {
      this.route('users', function() {
        this.route('user', {path: ':user_id'}, function() {
          this.route('locations');
          this.route('affiliation');
          this.route('classes');
        });
      });
    });
     
    export default Router;
    // app/routes/users.js
     
    import Ember from 'ember';
    const {get} = Ember;
     
    export default Ember.Route.extend({
     
      model() {
        return get(this, 'store').findAll('user');
      }
     
    });
    // app/routes/users/user.js
     
    import Ember from 'ember';
    const {get} = Ember;
     
    export default Ember.Route.extend({
     
      model(user) {
        return get(this, 'store').findRecord('user', user.user_id);
      }
     
    });
    // app/routes/users/user/index.js
     
    import Ember from 'ember';
    import CrossModelsRoutingParent from 'ember-cross-models-routing/mixins/cross-models-routing-parent';
     
    export default Ember.Route.extend(CrossModelsRoutingParent, {
     
      defaultChild: 'users.user.classes'
     
    });
    // app/routers/users/user/classes.js
     
    import Ember from 'ember';
    import CrossModelsRoutingChild from 'ember-cross-models-routing/mixins/cross-models-routing-child';
     
    export default Ember.Route.extend(CrossModelsRoutingChild, {
     
      parentRouteToCross: 'users.user.index'
     
    });
    {{! 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>

    Keywords

    Install

    npm i ember-cross-models-routing

    DownloadsWeekly Downloads

    2

    Version

    1.0.1

    License

    MIT

    Last publish

    Collaborators

    • onechiporenko