ember.js - 在自定义 Handlebars 助手中使用 linkTo

Question

我正在使用 Handlebars 助手来解析一组对象，我希望将返回的结果包装在 #linkTo 调用中，以便 Embers 路由器将其接收。

这是我在 View 中的调用方式:{{buildBreadcrumb my_objects}}
这是我的助手的样子:

Ember.Handlebars.registerHelper 'buildBreadcrumb', (val, opts) ->
  value = Ember.get(this, val)
  out = ""
  value.forEach (group, index) =>
    if value.length - index == 2
      out += '{{#linkTo group ' + group.name + '}}'
    if value.length - index == 1
      out += '{{#linkTo group ' + group.name + '}}'
  out

以上只是解析出 {{#linkTo ...}}出于明显的原因，作为文字字符串。有什么方法可以让我按照我想要的方式解析它吗？我很清楚我可以在 View 本身中使用 {{#each}} 等......但由于我的用例，我不得不使用帮助器来构建它。有什么建议么？

Answer 1

您可以编写自定义 Handlebars View 助手。该 View 可以封装 #each逻辑，而最终的助手看起来与您在这里的大部分相似。使用的唯一区别是必须将参数作为属性传递给 View 助手。

创建这个助手的方法是传入 View 类而不是助手函数。

App.BreadcrumbView = Ember.View.extend({
  templateName: 'breadcrumb',
  penultimate: function() {
    var length = this.get('items').length;
    return this.get('items')[length - 2];
  }.property('items'),
  last: function() {
    var length = this.get('items').length;
    return this.get('items')[length - 1];
  }.property('items')
});

Ember.Handlebars.helper('breadcrumb', App.BreadcrumbView);

以及对应的模板，

<script type='text/x-handlebars' data-template-name='breadcrumb'>
  <ul class="breadcrumb">
    {{#each item in view.items}}
      <li>{{#linkTo 'group' item}}{{item.id}}{{/linkTo}} &raquo;
      </li>
    {{/each}}
  </ul>    
</script> 

并在应用程序中使用助手，

<script type='text/x-handlebars' data-template-name='breadcrumb'>
  <ul class="breadcrumb">
    <li>{{#linkTo 'group' view.penultimate}}{{view.penultimate.id}}{{/linkTo}} &raquo;</li>
    <li>{{#linkTo 'group' view.last}}{{view.last.id}}{{/linkTo}}</li>
  </ul>    
</script>  

这种方法的一个好处是绑定(bind)是自动连接的，因此更改项目数据将自动更新面包屑 View ，保留内部变形。

这是 jsbin例子。