如何使用把手动态生成ember中的可点击链接

时间:2013-10-10 15:26:34

标签: ember.js handlebars.js

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

1 个答案:

答案 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>