Ember JS Deep Linking

时间:2014-06-07 18:15:26

标签: ember.js deep-linking

我有一个带有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

然而,当我直接将此网址剪切并粘贴到浏览器地址栏中时,我只获得左侧的链接列表,而在主窗口中没有任何内容。没有出现“说话”和“做”的列表。浏览器中没有显示错误,并且ember不会引发异常。

当你直接深层链接而不是必须一直从根目录导航时,如何让这个简单的嵌套路由刷新所有内容?

1 个答案:

答案 0 :(得分:2)

当您使用link-to并将模型传递给它时,它将跳过模型钩子,将模型从link-to提供给路径。如果刷新页面,它将点击树中的每条路径,直到获取完成请求所需的每个资源/路径的模型。因此,如果我们一次查看您的路线,它将执行此操作:

  1. 点击应用程序路径,获取其模型(如果存在)(应用程序路由是每个Ember应用程序的根目录)。
  2. 点击index路线,返回App.Role.find()
  3. 点击activites路线,返回App.Activity.find()
  4. 3号是你真正的问题所在。无论该部分网址是否分析,管理或开发,您都将返回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