我正在尝试使用emberjs框架生成可点击链接。我正确设置了模型,并且我有以下车把模板:
<script type="text/x-handlebars" data-template-name="index" >
{{#each name in model.mymodules }}
{{#link-to name 'home' }}{{name}}{{/link-to}}
{{/each
</script>
我们的想法是在每个链接上调用modulename / home。 例如:说我有3个模块:“abc”,“xyz”,“123” 我想要三个链接:
abc <a href="/abc/home">, xyz <a href="/xyz/home">, 123 <a href="/123/home">
我需要定义什么样的控制器/路由才能使其正常工作。
的jsfiddle:
答案 0 :(得分:1)
您需要利用余烬资源来处理此问题
阅读http://emberjs.com/guides/routing/defining-your-routes/
应用程序代码的示例应该是这样的。 JSfidle http://jsfiddle.net/NQKvy/291/
App = Ember.Application.create({
LOG_TRANSITIONS: true,
LOG_TRANSITIONS_INTERNAL: true,
LOG_VIEW_LOOKUPS: true
});
App.Router.map(function() {
this.resource('modules', { path: '/modules' }, function() {
this.route('home', {path: ':module_name/home'});
});
});
App.IndexRoute = Ember.Route.extend({
model:function(){
return App.Modules;
}
});
App.ModulesHomeRoute = Ember.Route.extend({
model: function(params) {
//returns an object from an ember array based on the property value
return App.Module.findProperty('name',params.module_name);
},
serialize: function(model, params) {
//updates the url with the param value
return { module_name: model.get('name') };
}
});
App.Modules = Ember.A([
Ember.Object.create({name:'aaa'}),
Ember.Object.create({name:'bbb'}),
Ember.Object.create({name:'ccc'})
]);
和hadlebars代码
<script type="text/x-handlebars" data-template-name="index">
<ul>
{{#each}}
<li>{{name}}</li>
<li>{{#link-to 'modules.home' this}}{{name}}{{/link-to}}</li>
{{/each}}
</ul>
</script>
<script type="text/x-handlebars" data-template-name="modules/home">
This is the home of the module {{name}}
</script>