Package ember-glimmer

Glimmer is a templating engine used by Ember.js that is compatible with a subset of the Handlebars syntax.

Showing a property

Templates manage the flow of an application's UI, and display state (through
the DOM) to a user. For example, given a component with the property "name",
that component's template can use the name in several ways:

app/components/person.js

1
2
3

exportdefaultEmber.Component.extend({
name: 'Jill'
});

app/components/person.hbs

1
2
3

{{name}}<div>{{name}}</div><spandata-name={{name}}></span>

Any time the "name" property on the component changes, the DOM will be
updated.

Properties can be chained as well:

1
2

{{aUserModel.name}}
<div>{{listOfUsers.firstObject.name}}</div>

Using Ember helpers

When content is passed in mustaches {{}}, Ember will first try to find a helper
or component with that name. For example, the if helper:

1
2

{{ifname"I have a name""I have no name"}}
<span data-has-name={{ifnametrue}}></span>

The returned value is placed where the {{}} is called. The above style is
called "inline". A second style of helper usage is called "block". For example:

1
2
3
4
5

{{#if name}}
I have a name
{{else}}
I have no name
{{/if}}

The block form of helpers allows you to control how the UI is created based
on the values of properties.
A third form of helper is called "nested". For example here the concat
helper will add " Doe" to a displayed name if the person has no last name: