Ember.js: как фильтровать модель по маршруту

Question

Я пытаюсь принять завершенное/заархивированное поведение маршрута из этого TodoMVC-Tutorial.

Я использую Ember 1.7.0, Ember Data 1.0.0-beta.9 и Handlebars 1.3.0.

Я хочу, чтобы все активные пользователи просматривали мой индексный маршрут (example.com/organization/users) и все архивные пользователи на моем архивированном маршруте (example.com/organization/users/archived).

Но фильтр не работает: архивные пользователи показаны на моем указательном маршруте и наоборот, но мой вывод console.log верен.

Обновление: Пожалуйста, проверьте этот JSBin: http://emberjs.jsbin.com/puxeludeviga/3/

---

Вот как я попробовал:

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'); 
    }); 
    } 
}); 

И это мой шаблон:

<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 (укороченный) router.js файл:

Docket.Router.map(function() { 

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

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

    }); 

}); 

Answer 1

Я думаю, что нашел вашу проблему. Дело в том, что шаблон вы рендеринг пользователей в, имеет такое название:

organization/users 

и оказывается, что он совпадал с вами organization.users маршрута, поэтому он всегда делают данные от этого маршрута. Вы должны изменить имя шаблона вас, скажем, чтобы:

organization/users_list 

, а затем использовать это в ваших маршрутах, это не будет иметь никаких проблем, потому что имя отличается от маршрута пользователей.

что-то вроде:

<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> 

и в маршрутах:

renderTemplate: function() { 

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

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