Dear Readers,
The Ember documentation says that in order to define a helper one should use the Ember.Handlebars.helper or the Ember.Handlebars.registerBoundHelper methods. Both of them create a bound helper for you. But what if I need an unbound helper?
The unbound helper allows outputting the result without a binding. For example, you can do this to render an attribute:
<img src="{{unbound thumbpath}}" /> // => <img src="someUrl" />
But this trick has its price - the value of the thumbpath will not be updated after you change the thumbpath in the model. So use it only when you don’t need a binding.
You may use it in a conjunction with another bound helper. For example:
{{unbound myBoundHelper 'param1'}} // => output of the myBoundHelper
This will transform the myBoundHelper (which is bound) into an unbound one. The effect is exactly the same - what’s been rendered will not be updated when the model changes. Theoretically there may be some performance benefits of using the unbound helper when you don’t need bindings. But I didn’t do any benchmarks to prove this.
Nevertheless, there is one more trick that I’ve discovered - using the unbound helper together with the #each block helper does not create an unbound version of the #each helper.
See a jsbin snippet below. Click the “Change Model” button to see that the image src attribute will not be updated but the list will change. I’d expect it to remain unchanged but it’s how it works:
First, I render the image using the unbound helper:
<img src="{{unbound thumbpath}}" />
Then I render an array of items using the #each helper:
{{#unbound each item in items}}
{{item}}
{{/unbound}}
Thanks for reading. Please comment and subscribe!