{{#each}}內的車把助手

Question

我嘗試在{{#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}}的{{#with}} ，只需用作普通助手即可。

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

Answer 3

如果您不想使用全局幫助程序，則可以使用“pathed query”：

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

../是pathed查詢的語法。 它會導致您遍歷范圍樹1級，並從父范圍訪問私有數據。 要向上移動2個級別，您可以執行以下操作../../ 。 如果你有嵌套的for循環，這很有用。