Ember JS 深度链接

Question

我有一个带有 ember-data 1.0.8 beta 的 Ember JS 1.5.1 应用程序。有两个简单的编译模板，相关部分是：

索引

<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>

活动

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

应用程序也很简单，简化为几位夹具数据和一些路由功能：

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'
}];

当我导航到 localhost 时，我得到的是屏幕左侧三个角色的简单列表，而右侧什么都没有。 （如预期）

当我然后选择一个链接（例如“分析”）时，右侧的出口会填充两个活动名称“说话”和“做”的预期列表。

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

到目前为止一切顺利。

我注意到，当我将鼠标悬停在“分析”链接上时，浏览器会按预期显示以下网址

localhost:/#/Analysis

但是，当我直接将此 url 剪切并粘贴到浏览器地址栏中时，我只会得到左侧的链接列表，而在主窗口中什么也没有。 “说”和“做”的列表没有出现。浏览器中没有显示错误，并且 ember 不会引发异常。

当您直接进行深度链接而不是一直从根目录导航时，如何获得这种简单的嵌套路由来刷新所有内容？

Answer 1

当您使用link-to 并将模型传递给它时，它将跳过将模型从link-to 提供给路由的模型钩子。如果您刷新页面，它将沿着树向下点击每个路由，直到它为满足请求所需的每个资源/路由获取模型。因此，如果我们一次查看一条路线，它会这样做：

1. 点击应用程序路由，如果存在则获取其模型（应用程序路由是每个 Ember 应用程序的根）。
2. 点击您的index 路线，它将返回App.Role.find()
3. 点击您的activites 路线，它将返回App.Activity.find()

3 号是你真正的问题所在。无论 url 的那部分是否显示 Analysis、Management 或 Development，您都将返回 App.Activity.find()。您已经定义了动态 slug :name，ember 将解析 url 的适当部分，并将该部分作为对象传递，在 Analysis 的情况下，Ember 会将 { name: 'Analysis' } 传递给您的模型钩子。您将希望利用这一点，返回正确的模型。

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

此外，您使用的是相当旧的 Ember Data 版本。下面是如何将 Ember Data 用于较新版本的一个小示例：http://emberjs.jsbin.com/OxIDiVU/617/edit

如您所见，您不再声明商店。此外，您可能会遇到被视为异步属性的问题，并且可能想阅读https://github.com/emberjs/data/blob/master/TRANSITION.md