Parent: ember
Glimmer is a templating engine used by Ember.js that is compatible with a subset of the Handlebars syntax.
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:
export default Ember.Component.extend({ name: 'Jill' });
{{name}} <div>{{name}}</div> <span data-name={{name}}></span>
Any time the "name" property on the component changes, the DOM will be updated.
Properties can be chained as well:
{{aUserModel.name}} <div>{{listOfUsers.firstObject.name}}</div>
When content is passed in mustaches {{}}
, Ember will first try to find a helper or component with that name. For example, the if
helper:
{{if name "I have a name" "I have no name"}} <span data-has-name={{if name true}}></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:
{{#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:
<span data-name={{concat firstName ( if lastName (concat " " lastName) "Doe" )}}></span>
Ember's built-in helpers are described under the Ember.Templates.helpers namespace. Documentation on creating custom helpers can be found under Ember.Helper.
Ember components represent state to the UI of an application. Further reading on components can be found under Ember.Component.
© 2017 Yehuda Katz, Tom Dale and Ember.js contributors
Licensed under the MIT License.
https://emberjs.com/api/ember/2.15/modules/ember-glimmer