我有一个 Ember JS 1.5.1 应用程序和 ember-data 1.0.8 beta。有两个简单的编译模板,相关部分是:
索引
<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'
}];
当我导航到本地主机时,我得到的是屏幕左侧的三个角色的简单列表,右侧没有任何内容。 (如预期)
当我选择一个链接(例如“分析”)时,右侧的导出将填充两个事件名称“说话”和“做”的预期列表。
LHS list RHS pane
========== ========
Management talking
Analysis doing
Development
到目前为止一切顺利。
我注意到,当我将鼠标悬停在“分析”链接上时,浏览器会按预期显示下面的网址
localhost:/#/Analysis
但是,当我直接将此网址剪切并粘贴到浏览器地址栏中时,我只得到左侧的链接列表,而主窗口中没有任何内容。 “说”和“做”的列表没有出现。浏览器中没有显示任何错误,并且 ember 不会引发异常。
当您直接深层链接而不是一直从根目录导航时,如何获得这个简单的嵌套路由来刷新所有内容?
最佳答案
当您使用 link-to
并向其传递模型时,它将跳过将模型从 link-to
提供给路由的模型 Hook 。如果刷新页面,它将点击树中的每个路由,直到获取满足请求所需的每个资源/路由的模型。因此,如果我们一次查看一条路线,将会执行以下操作:
- 点击应用程序路由,如果存在则获取其模型(应用程序路由是每个 Ember 应用程序的根)。
- 点击您的
index
路由,它将返回App.Role.find()
- 点击您的
activites
路线,它将返回App.Activity.find()
第三点是真正的问题所在。无论 URL 的该部分是否显示“分析”、“管理”或“开发”,您都将返回 App.Activity.find()
。您已经定义了动态 slug :name
,ember 将解析 url 的适当部分,并将该部分作为对象传递,在 Analysis
的情况下,Ember 将将 { name: 'Analysis' }
传递给您的模型 Hook 。您将希望利用这一点来返回正确的模型。
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
关于ember.js - Ember JS 深度链接,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24100259/