{{#each}}内的车把助手

时间:2012-09-11 09:39:40

标签: javascript ember.js handlebars.js

我尝试在{{#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>.

我如何调用已注册的帮助程序以便识别它?

3 个答案:

答案 0 :(得分:9)

使用this solution

运行它

<强>的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>​

答案 1 :(得分:0)

我的助手是用单独的文件写的,所以我修改了@ 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}}

答案 2 :(得分:0)

如果您不想使用全球帮助者,那么您可以使用&#34; pathed查询&#34;:

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

../是pathed查询的语法。它会导致您遍历范围树1级,并从父范围访问私有数据。要向上遍历2个级别,您可以执行以下../../。如果你有嵌套的for循环,那么这很有用。