Ember.js路由——通过不同的模型进行过滤的最佳方式

Ember.js Routes - Best Way to Filter By a Different Model

本文关键字：模型 过滤 方式 最佳 路由 js Ember      更新时间：2023-09-26

我试图创建一个路由结构，在那里我可以查看所有成员(/成员)的列表或按组(members/group-slug-to-filter-by)过滤它们。我有一个成员模型和一个组模型，以及以下路由:

this.resource('members', function() {
    this.route('/');
    this.route('group', { path: ':group_slug' });
});

我的MembersGroup路由是这样的:

var MembersGroupRoute = Ember.Route.extend({
    model: function(params) {
        // Just have this here temporarily for testing purposes,
        // but ultimately this is where I would filter by group slug
        return this.store.find('member').then(function(models) {
            return models.slice(0, 2);
        });
    },
    serialize: function(model) {
        return { 'group_slug': model.get('slug') };
    }
});

实际上，我有一个项目符号列表显示每个组，以及一个我想传递组模型的链接:

<ul class="nav nav-pills nav-stacked">
    {{#each group in groups}}
        <li>{{#link-to 'members.group' group class="list-group-item"}}{{group.name}} <span class="badge">{{group.memberCount}}</span>{{/link-to}}</li>
    {{/each}}
</ul>

这样做时，我为链接到帮助器提供了一个模型，因此它转换到成员。组路由而不执行模型钩子;这是一个问题，因为我不能接受传入的组模型，重新执行模型钩子，并通过组的段塞进行过滤。

如果我传入组段(作为字符串，而不是组模型)，模型钩子被执行，列表被过滤:

<li>{{#link-to 'members.group' group.slug class="list-group-item"}}{{group.name}} <span class="badge">{{group.memberCount}}</span>{{/link-to}}</li>

实现这个功能的最好方法是什么?我应该重组我的路线，只是继续在组段传递，或者有一种方法可以让这个工作，而在组模型中传递?

我很确定我可以在链接上使用操作来通过组模型过滤，但我想让URL反映正在过滤的组(即。成员/group-slug)。

谢谢!

如果您通常会传入段塞，而不是经过过滤的组(可能是因为您无法访问链接到的经过过滤的组)，请考虑将段塞作为路由的模型。在控制器级别，你会希望模型实际上是被过滤的组，你可以使用setupController钩子来做到这一点。在这种情况下，你不需要定义model或serialize钩子，你的路由可以像下面这样:

var MembersGroupRoute = Ember.Route.extend({
    setupController: function(controller, model) {
        slug = model;
        controller.set 'model', this.store.find('member', groupSlug: slug).then(function(models) {
            return models.slice(0, 2);
        });
    }
});

那么你可以用上面提到的第二种方式调用你的路由:

<li>{{#link-to 'members.group' group.slug class="list-group-item"}}{{group.name}}

您也可以做类似的事情，并将未过滤的组作为模型钩子中的模型，并作为通过链接传递的内容，然后在设置控制器的模型之前使用setupController钩子通过该组过滤成员。

也就是:

var MembersGroupRoute = Ember.Route.extend({
    model: function(params) {
        return this.store.find('group', slug: params.group_slug)
    },
    serialize: function(model) {
        return { 'group_slug': model.get('slug') };
    },
    setupController: function(controller, model) {
        group = model;
        controller.set 'model', this.store.find('member', group: group)
    }
});

你用上面提到的第一种方式调用路由:

 <li>{{#link-to 'members.group' group class="list-group-item"}}{{group.name}} <span class="badge">{{group.memberCount}}</span>{{/link-to}}</li>
相关文章：