Slevin
Slevin

Reputation: 4222

Ember.js: How to filter a model by route

I'm trying to adopt the completed/archived-route-behavior from this TodoMVC-Tutorial.

I'm using Ember 1.7.0, Ember Data 1.0.0-beta.9 and Handlebars 1.3.0.

I want to get all active users on my index route (example.com/organization/users) and all archived users on my archived route (example.com/organization/users/archived).

But the filter doesn't work: archived users are shown on my index route and vice versa, but my console.log output is correct.

Update: Please check this JSBin: http://emberjs.jsbin.com/puxeludeviga/3/


That's how I tried it:

Docket.OrganizationUsersRoute = Docket.AuthenticatedRoute.extend({

  model: function() {
    return this.store.find('user');
  },

  renderTemplate: function() {

    // render all posts
    this.render('organization/users', {
      into: 'application'
    });

    // render toolbar
    this.render('organization/toolbar', {
      into: 'application',
      outlet: 'toolbar'
    });
  }

});

Docket.OrganizationUsersIndexRoute = Docket.OrganizationUsersRoute.extend({
  model: function() {
    console.log('index');
    return this.store.filter('user', function(user) {
      return !user.get('archived');
    });
  }
});

Docket.OrganizationUsersArchivedRoute = Docket.OrganizationUsersRoute.extend({
  model: function() {
    console.log('archived');
    return this.store.filter('user', function(user) {
      return user.get('archived');
    });
  }
});

And that's my template:

<ul class="entries">
    {{#each}}
        <li>
            <div class="actions">
                <button {{action "remove" this}} class="ei-icon-close"></button>
            </div>
            <div class="link" {{action "edit" this}} data-uk-modal="{target:'#user-modal'}">
                <span class="before">{{initial}}</span>{{name}}
            </div>
        </li>
    {{else}}
        <li>No users</li>
    {{/each}}
</ul>

My (shortened) router.js file:

Docket.Router.map(function() {

  // organization route
  this.resource('organization', function() {

    // user routes
    this.resource('organization.users', { path: '/users' }, function() {
      this.route('archived');
    });

  });

});

Upvotes: 0

Views: 222

Answers (1)

fanta
fanta

Reputation: 1489

I think I found your issue. The thing here is that template you're rendering the users into, has this name:

organization/users

and turns out that it matches to you organization.users route, so, it is always rendering the data from that route. You need to change the name of you template, let's say to:

organization/users_list

and then, use that in your routes, it will not have any problems because the name is different to the users route.

something like:

<script type="text/x-handlebars" data-template-name="organization/users_list">
  <div class="top">
    <h1>Users</h1>
    {{#link-to 'organization.users.index' class="button-archive"}}active{{/link-to}} - {{#link-to 'organization.users.archived' class="button-archive"}}archived{{/link-to}}
  </div>

  <ul class="entries">
    {{#each}}
      <li>{{name}} - Archived: {{archived}}</li>
    {{else}}
      <li>No users to show</li>
    {{/each}}
  </ul>
</script>  

and in your routes:

renderTemplate: function() {

  // render all posts
  this.render('organization/users_list', {
    into: 'application'
  });

  // render toolbar
  this.render('organization/toolbar', {
    into: 'application',
    outlet: 'toolbar'
  });
}

Upvotes: 2

Related Questions