带有多个参数的 Ember JS 路由答案

【问题标题】：Ember JS routing with multiple params带有多个参数的 Ember JS 路由
【发布时间】：2014-03-12 05:41:49
【问题描述】：

我正在学习如何使用 Ember JS，但遇到了一个问题。

我一直在开发一个非常简单的应用程序，它允许用户从图书馆添加/编辑/删除书籍，然后根据标题或作者搜索书籍。基于此，我正在尝试创建一个链接，该链接将呈现为“/search/title/adventures_of_huckleberry_finn”，它会告诉路由器过滤模型，以便它只返回标题等于“哈克贝利·费恩历险记”的书籍（我知道我需要对字符大小写进行一些字符串格式化，并用下划线替换 URL 的空格，但我并不担心）。

我的模板中有以下链接（标题被硬编码以简化测试）

{{#link-to "books.search" "title" "adventures_of_huckleberry_finn"}}Search by title{{/link-to}}

我定义了以下路由（我怀疑我需要嵌套第二个动态段，但我不知道该怎么做，因为我不希望涉及新的控制器/路由）

Books.Router.map(function () {
    this.resource('books', { path: '/' }, function () {
        this.route('search', { path: 'search/:search_by/:keyword' });
    });
});

<!-- ... additional lines truncated for brevity ... -->

Books.BooksSearchRoute = Ember.Route.extend({
    model: function (params) {
        return this.store.filter('book', function (book) {
            return book.get(params.search_by) == params.keyword;
        })
    },
    renderTemplate: function (controller) {
        this.render('books/index', { controller: controller });
    }
});

现在，如果我对 BooksSearchRoute 中的值或 :searchBy 或 :keyword 参数进行硬编码，则可以正常工作，但是当我尝试动态传递这两个参数时，会出现以下错误：

传递的上下文对象多于路径的动态段：books.search

如何更新路由，以便我可以正确地将两个动态参数传递到 BooksSearchRoute？

【问题讨论】：

老实说，我会避免在路由上使用复合键。我们在其中一条路线上做到了这一点，这真是令人头疼。将路线包装在 2 条路线中，或者用破折号连接复合键会容易得多。如果你愿意，我可以展示 wrap 方法。
@kingpin2k 我在我的项目中遇到了同样的问题。如果你能在这里展示你的 wrap 方法，那就太棒了（如果主题所有者也可以的话）；）
@kingpin2k 是的，我很想看看你所说的 wrap 方法。谢谢
好了，希望对大家有所帮助。

标签： ember.js

【解决方案1】：

这是一般概念，您基本上将路由用作仅用于复合键的虚拟路由。就我个人而言，我仍然更喜欢用破折号或其他东西连接键并使用单一路线，但是嘿，这就是它的工作原理。

App.Router.map(function() {
  this.resource('colorWrap', {path:'/:pk1'}, function(){
    this.resource('color', {path: '/:pk2'});
  });
});

App.ColorWrapRoute = Ember.Route.extend({
  model: function(params) {
    return {pk1:params.pk1};
  }
});

App.ColorRoute = Ember.Route.extend({
  model: function(params) {
    var wrapModel = this.modelFor('colorWrap');
    return $.getJSON('/colors/' + wrapModel.pk1 + '/' + params.pk2);
  }
});


{{link-to 'Click to see the red color!' 'color' 1 2}}

http://emberjs.jsbin.com/OxIDiVU/273/edit

【讨论】：