Question

我试图创建一个路径结构，在那里我可以查看所有成员（/成员）的列表或按组过滤它们（members / group-slug-to-filter-by）。我有一个会员模型以及一个群组模型，以及以下路线：

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

我的会员组路线如下：

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>

当这样做时，我为链接到帮助器提供了一个模型，因此它转换到members.group路由而不执行模型钩子;这是一个问题，因为我不能采用传入的组模型，重新执行模型钩子，并按群组的slug进行过滤。

如果我传入组slug（作为字符串，而不是组模型），则执行模型钩子并过滤列表：

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

这项功能的最佳方法是什么？我应该重新组织我的路线，只是继续传递组slug，或者是否有办法在传递组模型时使其工作？

我非常确定我可以在链接上使用操作来按组模型进行过滤，但我想让URL反映正在过滤的组（即.member / group-slug）。 / p>

谢谢！

Answer 1

如果您通常会传入slu ,,而不是过滤组（可能是因为您无法访问链接到的过滤组），请考虑将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}}

你也可以做类似的事情并将未过滤的组作为模型钩子中的模型，并通过link-to传递给它们，然后使用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>

Ember.js路线 - 通过不同模型过滤的最佳方式

1 个答案: