Ember.js 新路由器导航错误信息: Error: assertion failed: Cannot call get with 'id' on an undefined object

Question

我一直在尝试新的路由器和新的 Ember 代码(版本:v1.0.0-pre.2-366-g4772b18)，我有点麻烦。我想做一件简单的事情:当我点击一个链接时，它应该导航到那个状态。

但是我得到了这个错误:

assertion failed: Cannot call get with 'id' on an undefined object.

要触发错误，请单击大红色标题。顶部的第一个 - 上面写着“Ember Ready”。

我没有 JSFiddle，但你可以在这里查看实时站点: http://eduardmoldovan.com/我基本上在那里推送了相同的代码。

我的代码:

var Ngin = window.Ngin = Ember.Application.create({
    ready: function() {
        "use strict";
        this.set("Router.enableLogging", true);
        this.set("Router.location", "history");
    },
    customEvents: {
        blur: "blur",
        paste: "paste",
        changed: "changed"
    }
});

DS.RESTAdapter.configure("plurals", {
    article: "article"
});

Ngin.Store = DS.Store.extend({
    revision: 11,
    adapter: DS.RESTAdapter.create({
        namespace: "private-api",
        bulkCommit: true
    })
});

Ngin.Article = DS.Model.extend({
    title: DS.attr("string"),
    lead: DS.attr("string"),
    url: DS.attr("string"),
    pubdate: DS.attr("date"),
    channel: DS.attr("string")
});

Ngin.IndexController = Ember.ObjectController.extend({
    content: [],
    goToArticle: function() {
        "use strict";
        this.get('target').transitionTo("article");
    }
});
Ngin.IndexModel = DS.Model.extend({});

Ngin.ApplicationView = Ember.View.extend({
    templateName: "page"
});

Ngin.Router.map(function(match) {
    "use strict";
    match("/").to("index");
    match("/technical/:url/").to("article");
});

Ngin.IndexRoute = Ember.Route.extend({
    setupController: function(controller) {
        "use strict";
        var all,
            latestOne,
            latestList;
        latestOne = Ngin.Article.find({
            filter: 'latest-one'
        });
        latestList = Ngin.Article.find({
            filter: 'latest-list'
        });
        controller.set('latestOne', latestOne);
        controller.set('latestList', latestList);
    },
    renderTemplate: function() {
        "use strict";
        this.render("header", {
            outlet: "header"
        });
        this.render("index", {
            outlet: "content"
        });
        this.render("footer", {
            outlet: "footer"
        });
    }
});


Ngin.ArticleRoute = Ember.Route.extend({
    model: function(params) {
        "use strict";
        console.log('ede');
        return Ngin.Article.find(params.url);
    },
    setupController: function(controller) {
        "use strict";
    },
    renderTemplate: function() {
        "use strict";
    }
});

$("body div").remove();

Ngin.initialize();

像这样一个简单的 Action : {{action goToArticle}}
我真的不明白谁想叫什么。对此有任何想法吗？我一直在寻找答案或例子，但没有幸运。

Answer 1

你的问题是你调用 transitionTo不提供模型。

Ember 正在尝试过渡到 article路线。为此，它需要生成 :url 的值动态段。为了得到它，它将您作为第二个参数传递的模型传递给 transitionTo到路线的serialize方法。

默认 serialize方法尝试用 id 填充动态段模型的属性。

你的行动是:

{{action goToArticle}}

它应该是:

{{action "goToArticle" article}}

然后，您需要更新您的 IndexController取参数:

Ngin.IndexController = Ember.ObjectController.extend({
  content: [],
    goToArticle: function(article) {
      this.transitionTo("article", article);
    }
});

综上所述，您确实应该在此处使用链接，而不是操作。这将为您处理一切:

{{#linkTo "article" article}}{{article.title}}{{/linkTo}}

您可以了解 the link helper和 the action helper在 Ember 指南中。