ember-glimmer
ember-glimmer Module
Parent: ember
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
export default Ember.Component.extend({ name: 'Jill' });
app/components/person.hbs
{{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>
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:
{{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.
Invoking a Component
Ember components represent state to the UI of an application. Further reading on components can be found under Ember.Component.
Classes and Namespaces
- Ember.Templates.helpers
- Ember.LinkComponent
- Ember.TextArea
- Ember.Component
- Ember.Helper
- Ember.HTMLBars
© 2017 Yehuda Katz, Tom Dale and Ember.js contributors
Licensed under the MIT License.
https://emberjs.com/api/modules/ember-glimmer.html