ember.js - 如何使用把手在 ember 中动态生成可点击链接

Question

我正在尝试使用 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：

http://jsfiddle.net/spkRa/2/

Answer 1

您需要利用 ember 资源来处理此问题

阅读http://emberjs.com/guides/routing/defining-your-routes/

应用程序代码示例应该是这样的。JSfiddle 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>