Ember.js new router navigation error message: Error: assertion failed: Cannot call get with 'id' on an undefined object

Question

I have been trying the new Router and the new Ember code (Version: v1.0.0-pre.2-366-g4772b18), and I am in a bit of a trouble. I want to do a simple thing: when I click a link, it should navigate away to that state.

But instead I get this error:

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

To trigger the error, click the big red title. The first one on the top - the one that says 'Ember Ready'.

I have no JSFiddle, but you can check the live site here: http://eduardmoldovan.com/ I have basically pushed the same code there.

My code:

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();

And a simple action like this: {{action goToArticle}}

I don't really understand who wants to call what. Any idea on this? I have been looking for answers or examples, but haven't been lucky with that.

Answer 1

Your problem is that you're calling transitionTo without supplying a model.

Ember is trying to transition to the article route. In order to do that, it needs to generate value of :url dynamic segment. In order to get that, it passes the model that you pass as the second parameter to transitionTo to the route's serialize method.

The default serialize method tries to fill in the dynamic segment with the id property of the model.

Your action is:

{{action goToArticle}}

It should be:

{{action "goToArticle" article}}

Then, you need to update your IndexController to take the parameter:

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

All of that said, you really should be using a link here, not an action. That would handle everything for you:

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

You can learn about the link helper and the action helper in the Ember guides.