Routing names with ember.js

Question

I have a router like this

App.Router.map(function () {
    this.route("about");
    this.resource("invoices", { path: "/invoices" }, function () {
        this.resource("invoices.show", { path: "/:id" });
        this.resource("invoices.update", { path: "/:id/edit" });
        this.route("create");
    });
});

and to generate links to the various routes and resources I have this

<nav>
    {{#linkTo "invoices.index"}}Invoices{{/linkTo}}
    {{#linkTo "invoices.show" 1}}Invoice{{/linkTo}}
    {{#linkTo "invoices.create"}}New invoice{{/linkTo}}
</nav>

Why do I have to use invoices.show for the name of the show resource and then reference it as invoices.show but I can use create for the route and then reference it as invoices.create ?

Ideally my router would be

App.Router.map(function () {
    this.route("about");
    this.resource("invoices", { path: "/invoices" }, function () {
        this.resource("show", { path: "/:id" });
        this.resource("update", { path: "/:id/edit" });
        this.route("create");
    });
});

and it would auto-prefix the resource names since they are nested within the invoices resource. Right?

Answer 1

Yes, the nested resources can stack their names, and you should be able to reference a nested route with dot notation.

However, you will want to do something more like:

    this.resource("invoices", { path: "/invoices" }, function () {
        // invoices.show
        this.resource("show", { path: "/:id" }, function() { 
             // invoices.show.update
             this.route("update", { path: "/edit" });
        });
        // invoices.create
        this.route("create");
    });

since your update operation relies on the object supplied to the show route.

Basically nested elements that rely on the same, or a subset of resources used in a parent route should be defined as resource mappings. Leaf nodes can be defined as basic routes.