如何在ember中使linkTo动态化？

Question

<script type="text/x-handlebars" data-template-name="patient">
    <ul class="nav">
    {{#each menuItem in menuItems}}
        <li>{{#linkTo "dashboard.summary" menuItem}}{{menuItem.name}}{{/linkTo}}</li>
    {{/each}}
    </ul>
    {{outlet}}
</script>

在上面的代码中,如何创建linkTo动态链接而不是硬编码的"dashboard.summary"？例如,"dashboard."+menuItem.name.

Answer 1

在当前的Ember(本文中的1.10)中,助手现在接受将在当前上下文中作为属性查找的引用参数或参数.我相信这在Ember 1.2(更改日志)中有所改变.

如果引用,该参数将用作字符串:

{{#link-to 'post'}}Posts{{/link-to}}

如果没有引用,则将在当前上下文中查找该参数:

{{#link-to routeName}}Go To '{{routeName}}'{{/link-to}}

这将是指向routeName当前属性设置的链接.这可以动态更新.

下面是一个示例JSBin显示这个实际操作:http://emberjs.jsbin.com/nelafep/1/edit？html,css,js,output

Answer 2

您可以注册一个包装linkTo帮助程序的简单Handlebars帮助程序.

var linkTo = Ember.Handlebars.helpers.linkTo;
Ember.Handlebars.registerHelper('myLinkTo', function(name, suffixPath) {
  var suffix = Ember.Handlebars.get(this, suffixPath);    
  arguments = [].slice.call(arguments, 2);
  arguments.unshift(name + '.' + suffix);

  return linkTo.apply(this, arguments);
});

然后在你的模板中你可以写:

{{#each menuItems}}
    <li>{{#myLinkTo "dashboard" name this}}{{name}}{{/myLinkTo}}</li>
{{/each}}

帮助器将解析第二个参数并将其附加到第一个参数,前面加一个点.

编辑:现在可以在没有自定义帮助程序的情况下实现此行为.请参阅c4p的答案,了解当前解决此问题的方法.上述解决方案最后使用Ember 1.0.0-rc.1进行测试.