Ember.js dynamic content inside helper

Question

I have this template with a bunch of attributes coming from its view. For all of these attributes, I need to check if they whether they are null or not and show them:

...
<div {{bind-attr class=":(foo-class) view.foo::hidden"}}>{{view.foo}}</div>
<div {{bind-attr class=":(bar-class) view.bar::hidden"}}>{{view.bar}}</div>
...

To make the template less verbose, I would like to create a helper, let's say displayAttribute, that takes the name of the parameter and returns the proper HTML content.

However, I don't know how to build the string to return inside the helper in a way that the bindings are working.

Ember.Handlebars.helper('displayAttribute', function(attr, tag) {
    if (typeof(tag) === 'undefined') {
      tag = 'div';
    }

    // TODO: generate output string

    return new Handlebars.SafeString(output);
});

How should I proceed?

Answer 1

inorder to make bindings work, you are required to use Ember.Handlebars.registerBoundHelper

Ember.Handlebars.registerBoundHelper('displayAttribute', function(value,options) {
    if (typeof(tag) === 'undefined') {
      tag = 'div';
    }

    // TODO: generate output string

    return new Handlebars.SafeString(output);
}, dependentKeys);

Note that it takes 3 params.

@param {String} name
@param {Function} function
@param {String} dependentKeys*

For more documentation, i suggest to go through following links.

Ember API Docs
Ember Source Code

Here is the content from code docs

Example with options

Like normal handlebars helpers, bound helpers have access to the options passed into the helper call.

Ember.Handlebars.registerBoundHelper('repeat', function(value, options) {
    var count = options.hash.count;
    var a = [];
    while(a.length < count) {
        a.push(value);
    }
    return a.join('');
  });

This helper could be used in a template as follows:

  {{repeat text count=3}}

## Example with bound options

Bound hash options are also supported. Example:

{{repeat text countBinding="numRepeats"}}

In this example, count will be bound to the value of the numRepeats property on the context. If that property changes, the helper will be re-rendered.

## Example with extra dependencies

The Ember.Handlebars.registerBoundHelper method takes a variable length third parameter which indicates extra dependencies on the passed in value. This allows the handlebars helper to update when these dependencies change.

  Ember.Handlebars.registerBoundHelper('capitalizeName', function(value) {
    return value.get('name').toUpperCase();
  }, 'name');

## Example with multiple bound properties

Ember.Handlebars.registerBoundHelper supports binding to multiple properties, e.g.:

Ember.Handlebars.registerBoundHelper('concatenate', function() {
    var values = Array.prototype.slice.call(arguments, 0, -1);
    return values.join('||');
  });

Which allows for template syntax such as {{concatenate prop1 prop2}} or {{concatenate prop1 prop2 prop3}}. If any of the properties change, the helpr will re-render. Note that dependency keys cannot be using in conjunction with multi-property helpers, since it is ambiguous which property the dependent keys would belong to.

Here is the working jsbin as an example