自定义Handlebars helper - 参数未解析

wry*_*ych 4 handlebars.js ember.js

# here is CreditCards controller context
{{#with controllers.currentCardCategory}}
  {{#each property in cardProperties}}
    {{#is property.symbol 'your_savings'}}
      <td class="td">{{yourSavings}}</td>
    {{else}}
      <td class="td">{{cardProperty this property.symbol}}</td>
    {{/is}}
  {{/each}}
{{/with}}
Run Code Online (Sandbox Code Playgroud)

我动态创建表.所有内容都来自于ArrayController一个来自控制器的计算属性.symbol' field is underscored likeannual_fee'并且属于CreditCardProperty.每种卡类别都有不同的卡片属性.只有两个类别具有属性(类别具有许多卡属性),并且一个记录的computed字段设置为true.这意味着模板应该查找相应的控制器.

因为symbol(例如age_to_apply)与一个CreditCard字段(ageToApply)有关,我所能想到的就是使用cardProperty在上下文中接受当前卡的帮助器this并解析property.symbol,例如:

camelizedProperty = categoryProperty.camelize()
card.get 'camelizedProperty'
Run Code Online (Sandbox Code Playgroud)

理想情况下,我想没有帮助程序,并以某种方式使用它:

# *** {{property.symbol}} should look up this context
#     and become e.g {{annual_fee}} or {{annualFee}} - is it possible?
{{#with controllers.currentCardCategory}}
  {{#each property in cardProperties}}
    <td class="td">{{property.symbol}}***</td>
  {{/each}}
{{/with}}
Run Code Online (Sandbox Code Playgroud)

但问题是我不知道如何渲染'{{yourSavings}}'部分.你可以看到帮助者来自Handlebars助手的赃物收集.遗憾的是,帮助程序不解析属性,因此property.symbol成为一个字符串.

这里是:

Handlebars.registerHelper 'is', (value, test, options) ->
  if value is test then options.fn(@) else options.inverse(@)
Run Code Online (Sandbox Code Playgroud)

我认为这是可能的,但有正确的帮助 - 不知道哪一个.

我想要避免的是使用像计算属性if isYourSavings.

Dar*_*kar 6

我不确定你的代码的上下文,但看起来你正在寻找registerBoundHelper一个块帮助器.这不受支持.你会遇到这个警告,

断言失败:registerBoundHelper生成的助手不支持与Handlebars块一起使用.

执行您正在执行的操作的另一种方法是使用视图助手.视图助手就像一个助手,但可以使用自定义模板进行渲染.

比如一个CardItemView会,

App.CardItemView = Em.View.extend({
  templateName: 'cardItemTemplate'
});

Em.Handlebars.registerHelper('cardItem', App.CardItemView);
Run Code Online (Sandbox Code Playgroud)

在哪里cardItemTemplate,

<script type='text/x-handlebars' data-template-name='cardItemTemplate'>
  {{#if view.property.symbol}}
    <td class="td">{{yourSavings}}</td>
  {{else}}
    <td class="td">{{cardProperty view.property.symbol}}</td>
  {{/if}}
</script>
Run Code Online (Sandbox Code Playgroud)

你可以像这样使用助手,

{{#with controllers.currentCardCategory}}
  {{#each property in cardProperties}}
    {{cardItem property=property etc}}
  {{/each}}
{{/with}}
Run Code Online (Sandbox Code Playgroud)

您可以将任意数量的属性作为属性传递.这些将受到约束CardItemView.而且因为它是视图所做的任何事情,就像自定义计算属性一样,可以在其中完成CardItemView.

  • 谢谢!有用!我在您的示例代码中做了一些小修改.希望你不介意.:) (2认同)