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>

我的（缩短的）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'
  });
}

Ember.js：如何按路径过滤模型

1 个答案: