ember-build-attr-modifier
v1.0.0
Published
An Ember modifier to attach a dynamic attribute to an element.
Downloads
779
Readme
ember-build-attr-modifier
An Ember modifier to attach a dynamic attribute to an element.
Compatibility
- Ember.js v3.24 or above
- Ember CLI v3.24 or above
- Node.js v12 or above
Installation
ember install ember-build-attr-modifier
Usage
By default, attributes built with the modifier are prefixed with data-
as designed by HTML5 standards. If we wanted a very simple atttribute that used an argument (btnName
which we'll set to be confirm
) as part of the name, we could just list out our strings/arguments:
{{!-- app/components/foo-component.hbs --}}
<button {{build-attr 'custom-btn' @btnName}}>Confirm</button>
This would create a DOM element:
<button data-custom-btn-confirm="">Confirm</button>
All positional arguments are automatically concatenated. You can also pass in the value for the attribute:
{{!-- app/components/foo-component.hbs --}}
<button {{build-attr 'custom-btn' @btnName value=true}}>Confirm</button>
This would give you the expected:
<button data-custom-btn-confirm="true">Confirm</button>
In the event that you want to create a non-data attribute, you can do:
{{!-- app/components/foo-component.hbs --}}
<button {{build-attr 'iam' 'rebel' value='fact' noPrefix=true}}>Confirm</button>
This will generate:
<button iam-rebel="fact">Confirm</button>
Contributing
See the Contributing guide for details.
License
This project is licensed under the MIT License.