不幸的是,Ember 指南 ( http://emberjs.com/guides/templates/links/ ) 中的链接示例对我来说不起作用。
为了显示临时工列表,并为每个临时工提供指向详细信息页面的链接,我使用以下代码:
HTML:
<script type="text/x-handlebars" data-template-name="tempworkers">
<div>
{{#each controller }}
<tr>
<td>{{#linkTo 'tempworker' this}} {{firstname}} {{/linkTo}}</td>
<td>{{initials}}</td>
<td>{{completeSurname}}</td>
</tr>
{{/each}}
</div>
</script>
<script type="text/x-handlebars" data-template-name="tempworker">
<div id="tempworker">
<p>{{view Ember.TextField valueBinding='firstname'}}</p>
<p>{{view Ember.TextField valueBinding='initials'}}</p>
<p>{{view Ember.TextField valueBinding='surnamePrefix'}}</p>
<p>{{view Ember.TextField valueBinding='surname'}}</p>
</div>
</script>
Javascript:
window.App = Ember.Application.create({
LOG_TRANSITIONS: true,
ENV.EXPERIMENTAL_CONTROL_HELPER = true;
});
App.Store = DS.Store.extend({
revision : 11,
adapter : DS.RESTAdapter.extend({
url : 'http://dev.start.flexplanners.com/api'
})
});
App.Router.map(function() {
this.route('tempworkers'); // /tempworkers
this.route('tempworker', { path: '/tempworkers/:id' }); // /tempworkers/:id
});
App.TempworkersRoute = Ember.Route.extend({
model : function() {
return App.Tempworker.find(); // return All tempworkers to the TempworkersController
}
});
/* TODO: Question -> According to http://emberjs.com/guides/routing/defining-your-routes/, this should be working by convention, and NOT explicitely defined here?
* But when I leave it out, it's broken :(
* */
App.TempworkerRoute = Ember.Route.extend({
model : function(params) {
return App.Tempworker.find(params.id); // return tempworker by id to the TempworkerController
}
});
用例:
When I visit the URL /tempworkers, the app fires a request
to my server API, and return the list in my tempworkers view.
When I visit the URL /tempworkers/[UUID], the app fires a
request to my server API, and return the requested tempworker
in my tempworker view.
When I click a generated link in the list of tempworkers, the app routes me
to /tempworkers/<App.Tempworker:ember343:47cfa9f2159d45758ceacc4c15ae1671>,
and shows the details in my tempworker view
我的问题如下:
1)这 3 个用例是否显示出预期的行为?
2) 如果是,这是否显示了 2 种状态之间的区别,1 是新的 URL 访问(包括服务器 API 调用),1 是转换到另一个视图,并引用列表中的单个对象进行解析?
3) 如果是,什么时候可以重新加载列表并更新列表中的项目?
4)如果没有,我将如何让linkTo生成像'/tempworkers/[UUID]'这样的href,并让应用程序进行服务器API调用以获取tempworker的详细信息?
在此先感谢您的时间!
雷纳。