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.