里面车把帮手{{#each}}(Handlebar helper inside {{#each}})

2019-06-28 04:40发布

我尝试调用一个内部的注册车把帮手{{#each}}循环。 不幸的是Ember.js抱怨,因为它试图解决助手作为控制器的属性,而不是一个帮手。

Handlebars.registerHelper('testHelper', function(name) {
    return 'foo: ' + name
});

(名称和内容都只是虚值显示的例子)

{{#each entry in App.testController}}
   <div>{{{testHelper entry.name}}}</div>
{{/each}}

该Ember.js是打印错误:

Uncaught Error:  Handlebars error: Could not find property 'testHelper' on object <App.testController:ember254>.

如何需要调用注册的助手以便它能够识别?

Answer 1:

得到它运行,无论是与此解决方案 ,

使用Javascript

Handlebars.registerHelper('testHelper', function(property, options) {
  return 'foo: ' + Ember.get(options.data.view.content, property);
});

把手模板

<script type="text/x-handlebars" data-template-name='app-view'>
  <ul>
  {{#each entry in content}}
    <li>{{testHelper name}}</li>
  {{/each}}
  </ul>
</script>​

甚至更好,这一个:

使用Javascript

Handlebars.registerHelper('testHelper', function(property) {
  return 'foo: ' + Ember.get(this, property);
});

把手模板

<script type="text/x-handlebars" data-template-name='app-view'>
  <ul>
  {{#each entry in content}}
    {{#with entry}}
      <li>{{testHelper name}}</li>
    {{/with}}
  {{/each}}
  </ul>
</script>​


Answer 2:

我的助手都写在单独的文件,所以我修改@ MikeAski的回答是如下。

helpers/my-helper.js

var MyHelper = function(value) {
    return moment(value).format("MMMM Do, YYYY");
};

export
default MyHelper;

在顶部app.js

// import modules
import myHelper from 'appkit/helpers/my-helper';

// register custom helpers
Ember.Handlebars.registerBoundHelper('myHelper', myHelper);

然后,你甚至都不需要{{#with}}在车把上,只是作为一个正常的助手使用。

{{#each thing}}
    {{myHelper thing.foo}}
{{/each}}


Answer 3:

如果你不希望使用一个全球性的助手,那么你可以使用“径处理查询”:

{{#each entry in App.testController}}  
   <div>{{{../testHelper entry.name}}}</div>  
{{/each}}  

../是一径处理查询的语法。 它使你穿越了范围树1级,并从父范围内访问私人数据。 要遍历2平向上,你可以做以下../../ 。 如果你嵌套for循环,这非常有用。



文章来源: Handlebar helper inside {{#each}}