Ember JS Deep Linking

Question

I have an Ember JS 1.5.1 app with ember-data 1.0.8 beta. There are TWO simple compiled templates the relevant parts are:

index

<div class="container-fluid">
    <div class="col-md-2 sidebar">
        <ul class="nav nav-sidebar">
            {{#each model}}
            <li>
                {{#link-to 'activities' this}}{{name}}{{/link-to}}
            </li>
            {{/each}}
        </ul>
    </div>
    <div class="col-md-10 col-md-offset-2">
        {{outlet}}
    </div>
</div>

activities

<div>
    <ul>
        {{#each model.activities}}
        <div class="row">
            <p>activity {{id}} is {{name}}</p>
        </div>
        {{/each}}
    </ul>
</div>

The application is also simple, reduced to a few bits of fixture data and some route functions:

window.App = Ember.Application.create();

App.ApplicationAdapter = DS.FixtureAdapter;

App.Router.map( function(){
    this.resource('index', {path: '/'}, function(){
        this.resource('activities', { path:':name'}, function(){
            this.resource('activity');
        });
    });
});

App.IndexRoute = Ember.Route.extend({
    model: function(){
        return this.store.find('role');
    }
});

App.ActivitiesRoute = Ember.Route.extend({
    model: function(params){ 
        var roles = this.modelFor('index');
        return roles.findBy('name', params.name).get('activites');
    }
});

App.Role = DS.Model.extend({
    name: DS.attr('string'),
    activities: DS.hasMany('activity', {async:true} )
});

App.Activity = DS.Model.extend({
    name: DS.attr('string')
});

App.Role.FIXTURES = [{
    id: 1,
    name: 'Management',
    activities: [1]
},{
    id: 2,
    name: 'Analysis',
    activities: [1,2]
},{
    id: 3,
    name: 'Development',
    activities: [2]
}]

App.Activity.FIXTURES = [{
    id: 1,
    name: 'talking'
},{
    id: 2,
    name: 'doing'
}];

What I get when I navigate to localhost is a simple list of the three roles on the left hand side of the screen and nothing on the right hand side. (as expected)

When I then select a link (such as 'Analysis') the outlet on the right hand side fills with the expected list of two activity names "talking" and "doing".

LHS list         RHS pane
==========       ======== 
Management       talking
Analysis         doing
Development

So far so good.

I noticed that when I hovered over the 'Analysis' link the browser shows the url below as expected

localhost:/#/Analysis

However when I cut and paste this url into the browser address bar directly I only get the left hand side list of links and nothing in the main window. The list of "talking" and "doing" does no appear. There are no errors shown in the browser and ember does not raise and exceptions.

How do you get this simple nested route to refresh all the contents when you directly deep link rather than having to navigate from the root all the time?

Kingpin2k Kingpin2k · Accepted Answer · 2014-06-08T03:01:05

When you use link-to and pass it the model, it will skip the model hook supplying the model from the link-to to the route. If you refresh the page, it will hit each route down the tree until it's fetched the models for each resource/route necessary to fulfill the request. So if we look at your routes one at a time it will do this:

Hit the application route, fetch its model if it exists (application route is the root of every Ember app).
Hit your index route, where it will return App.Role.find()
Hit your activites route, where it will return App.Activity.find()

Number 3 is where you real issue lies. Regardless of whether or not that part of the url says Analysis, Management, or Development you will already return App.Activity.find(). You've defined the dynamic slug :name, ember will parse the appropriate part of the url, and pass that part is as an object, in the case of Analysis Ember will pass in { name: 'Analysis' } to your model hook. You will want to take advantage of this, to return the correct model.

App.ActivitiesRoute = Ember.Route.extend({
    model: function(params){ 
       var roles = this.modelFor('index');
       return roles.findBy('name', params.name);
    }
});

Additionally you are using a fairly old version of Ember Data. Here's a small example of how Ember Data should be used with newer versions: http://emberjs.jsbin.com/OxIDiVU/617/edit

As you can see, you no longer declare the store. Additionally you may run into trouble with what would be considered async properties, and might want to read https://github.com/emberjs/data/blob/master/TRANSITION.md

Ember JS Deep Linking

index

activities

1 Answers