Ember HTMLBars Tags
Ember HTMLBars Tags (ember-htmlbars-tags
) is an Ember addon that improves the maintainability of your commonly used HTML fragments without adding unnecessary view scope to your templates.
Example
{{!-- templates/tags/page-header.hbs --}} <header class="header" role="banner"> {{yield}}</header>
{{!-- templates/index.hbs --}} {{#tag 'page-header'}} {{!--References the index view--}} <h1>{{view.title}}</h1>{{/tag}}
In this example the <h1>
element is wrapper in the <header>
element but the template context remains the same.
Installation
ember install:addon ember-htmlbars-tags
Usage
The Ember HTMLBars API consists of a single helper, {{tag}}
. The tag helper should be used in block form and accepts a single parameter, name
, which is the name of the layout to wrap the content in:
{{#tag 'grid'}} {{some-component}} {{some-component}}{{/tag}}
The name
passed to {{tag}}
must correspond to a layout in the template/tags
directory. For example, {{#tag 'grid'}}
will look for a layout at templates/tags/grid.hbs
:
<ul class="grid"> {{yield}}</ul>
Note, you must add {{yield}}
to each tag layout.
It's that simple! Property bindings, actions, etc, will work as if the {{tag}}
helper was just plain ol' HTML in your template.
Questions and Issues
If you have any questions or issues please open an issue