CODEWITHSUNDEEP
ember.js
SuperMarco
SuperMarco

Reputation: 721

Emberjs nested route and resource

This is a question that I'm not sure how to answer it, I have a nested route like this :

Router.map(function() {
    this.resource('pages', function(){
        this.resource('page', { path: '/:id' }, function(){
            this.route('edit', function(){
                this.resource('images', function(){
                    this.resource('image', { path: '/:id'}, function(){
                        this.route('edit');
                    })
                }); 
            });
        });
    });
});

But the thing is that I don't know if my edit route (this.route('edit', function(){})) should be a route or a resource.

Because in my app, I will navigate like this : (let's take the id 1 for pages and 2 for images)

/pages/ => /pages/1/ => pages/1/edit => /pages/1/edit/images => /pages/1/edit/images/2

But one problem is that when I setup the {{link-to}} like this :

page = this.modelFor('page');

{{#each item in model}}
    {{#link-to "image" page item}}
        {{list-row item=item}} //component to display row in a table
    {{/link-to}}
{{else}}
    {{no-items}} 
{{/each}}

My list of links looks like that :

/pages/1/edit/images/1
/pages/2/edit/images/2
/pages/3/edit/images/3

It's like the page id is using the same id as the image which I don't understand how that is possible :/

[edit] :

When I click on an image inside /images/ it doing two transition and I have this in my console as debug :

      Rendering image with default view <webmob@view:default::ember844> Object {fullName: "view:image"}
vendor.js:28547 Could not find "image.index" template or view. Nothing will be rendered Object {fullName: "template:image.index"}
vendor.js:28547 Transitioned into 'pages.page.edit.images.image.index'
vendor.js:28547 Could not find "images.index" template or view. Nothing will be rendered Object {fullName: "template:images.index"}
vendor.js:28547 Transitioned into 'pages.page.edit.images.index'

[edit2]:

After I've created folder for my pages (I had the same warning for those route), it gives me this :

Could not find "pages" template or view. Nothing will be rendered Object {fullName: "template:pages"}
vendor.js:28547 Rendering pages.index with default view <webmob@view:default::ember518> Object {fullName: "view:pages.index"}
vendor.js:28547 Transitioned into 'pages.index'

[edit3]: This is the console output when my app structure is like this :

- templates/
-    pages.hbs
-    page.hbs
-    //other resources


 generated -> route:pages.index Object {fullName: "route:pages.index"}
webmob/routes/pages.js:12 DEBUG: Already log in
VM69786:161 Ember Inspector Active
vendor.js:28547 Rendering application with default view <webmob@view:toplevel::ember480> Object {fullName: "view:application"}
vendor.js:28547 Rendering pages with default view <webmob@view:default::ember489> Object {fullName: "view:pages"}
vendor.js:28547 generated -> controller:pages.index Object {fullName: "controller:pages.index"}
vendor.js:28547 Could not find "pages.index" template or view. Nothing will be rendered Object {fullName: "template:pages.index"}
vendor.js:28547 Transitioned into 'pages.index'
vendor.js:28547 generated -> route:page.index Object {fullName: "route:page.index"}

I have everything display fine, but always having the warning. When I create a pages folder like this :

- templates/
    -    pages/
        - index.hbs //empty file
    -    pages.hbs
    -    page.hbs
    -    //other resources

I have this in my console :

generated -> route:pages.index Object {fullName: "route:pages.index"}
webmob/routes/pages.js:12 DEBUG: Already log in
vendor.js:28547 Rendering application with default view <webmob@view:toplevel::ember419> Object {fullName: "view:application"}
vendor.js:28547 Rendering pages with default view <webmob@view:default::ember428> Object {fullName: "view:pages"}
vendor.js:28547 generated -> controller:pages.index Object {fullName: "controller:pages.index"}
vendor.js:28547 Rendering pages.index with default view <webmob@view:default::ember443> Object {fullName: "view:pages.index"}
vendor.js:28547 Transitioned into 'pages.index'
vendor.js:28547 generated -> route:page.index Object {fullName: "route:page.index"}
VM70411:161 Ember Inspector Active

Upvotes: 0

Views: 277

Answers (1)

Benito
Benito

Reputation: 700

In one of my projects, I stumbled upon a similar issue. I just checked my source code:

// Routing map
App.Router.map( function() {
    this.resource('projects', function() {
        this.resource('project', {path: ':name'}, function() {
            this.resource('edit', function() {
                this.resource('type', {path: '/type/:type_name'});
            });
        });
    });
});

I can access and edit a type inside a project with: /projects/MyNewProject/edit/type/RandomType (since I use my types' names and not their ids).

I remember noticing the exact same behavior as you did: if I used :name in both projectand typeresources, the generated link would be something like /projects/MyNewProject/type/MyNewProject. So having the same :id parameter for both your page and image resources probably is the cause of the problem. You might try :image_idfor your image resource, and stick with :id for your page resource.

As for the other aspect of your question, regarding whether you should use route or resource for your first edit route: the Ember Routing guide suggests that "You should use this.resource for URLs that represent a noun, and this.route for URLs that represent adjectives or verbs modifying those nouns."

But it doesn't seem so straightforward in your example, since you have a "resource" route nested inside an "action" route. I think you should use a resource, since the endpoint of your route (an image) is a resource.

Upvotes: 1

Related Questions