ember.js - custom Handlebars helper - parameter is not resolved

Question

# 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}}

I create the table dynamically. All content comes from ArrayController except one that is a computed property that comes from the controller. symbol' field is underscored likeannual_fee' and belongs to CreditCardProperty. Each card category has different set of card properties. Only two categories have properties (category has many card properties) and one record has computed field set to true. That means that the template should look up the corresponding controller.

As symbol (e.g age_to_apply) relates to one of the CreditCard fields (ageToApply) all I could to figure out was to use the cardProperty helper which takes current card in the context (this) and resolves property.symbol, e.g:

camelizedProperty = categoryProperty.camelize()
card.get 'camelizedProperty'

Ideally I'd like to do without the helper and use it somehow like this:

# *** {{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}}

But the problem is that I don't know how can I render that '{{yourSavings}}' part. The helper you can see comes from swag collection of Handlebars helpers. The helper, unfortunately does not resolve properties so that property.symbol becomes a string.

Here it is:

Handlebars.registerHelper 'is', (value, test, options) ->
  if value is test then options.fn(@) else options.inverse(@)

I think it is possible but with the right helper - don't know which one, though.

What I do would like to avoid is to resort to computed property like if isYourSavings.

Answer 1

I am not certain about the context of your code, but it seems like you are looking for registerBoundHelper with a block helper. This isn't supported. You will run into this warning,

Assertion failed: registerBoundHelper-generated helpers do not support use with Handlebars blocks.

An alternative way to do what you are doing is to use a view helper instead. A view helper is like a helper but can render with a custom template.

For instance a CardItemView would be,

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

Em.Handlebars.registerHelper('cardItem', App.CardItemView);

Where the cardItemTemplate is,

<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>

And you could use the helper like so,

{{#with controllers.currentCardCategory}}
  {{#each property in cardProperties}}
    {{cardItem property=property etc}}
  {{/each}}
{{/with}}

You can pass in any number of properties as attributes. These will be bound to the CardItemView. And since it's a view anything a view does, like custom computed properties, can be done in CardItemView.