In the last section you learned how to write a helper. A helper is usually a simple function that can be used in any template. Ember comes with a few helpers that can make developing your templates a bit easier. These helpers can allow you to be more dynamic in passing data to another helper or component. For a full list of built-in Helpers, see the Ember.Templates.helpers API documentation.
Using a helper to get a property dynamically
The {{get}}
helper
makes it easy to dynamically send the value of a variable to another helper or component.
This can be useful if you want to output one of several values based on the result of a computed property.
if the part
computed property returns "zip", this will display the result of this.address.zip
.
If it returns "city", you get this.address.city
.
Nesting built-in helpers
In the last section it was discussed that helpers can be nested.
This can be combined with these sorts of dynamic helpers.
For example, the {{concat}}
helper makes it easy to dynamically send a number of parameters to a component or helper as a single parameter in the
format of a concatenated string.
This will display the result of this.foo.item1
when index is 1, and this.foo.item2
when index is 2, etc.
Built-in block helpers
Now let's say your template is starting to get a bit cluttered and you now want to clean up the logic in your templates.
This can be achieved with the let
block helper.
The {{let}}
helper lets you create new bindings in your template.
Say your template now looks like this:
Welcome back
Account Details:
First Name:
Last Name:
As mentioned in the previous section we use the concat
helper to render both person.firstName
and person.lastName
in one go.
We can use let
to make a fullName
variable in the template with the result of the concat
:
Welcome back
Account Details:
First Name:
Last Name:
Now, as long as your template is wrapped in the let
helper you can access the full name as fullName
.
Array helper
Using the {{array}}
helper,
you can pass arrays directly from the template as an argument to your components.
<MyComponent @people=
/>
In the component's template, you can then use the people
argument as an array: