Skip to content
master
Go to file
Code

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
app
 
 
 
 
lib
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

README.md

ember-component-attributes

Build Status

This addon lets you easily bind HTML attributes to your ember components. It was inspired by the discussion in this rfc.

Installation

ember install ember-component-attributes

Usage

To bind an attribute foo to the value of bar, pass (html-attributes foo=bar) as the last positional argument to your component:

{{#x-foo (html-attributes style="margin-top: 10px") stuff=someStuff}}
  Sorry about the inline styles.
{{/x-foo}}

This helper also works with class and id attributes if you prefer to keep all your attributes together.

{{x-bar (html-attributes id="main-bar" class="large" data-foo="123")}}

Attribute bindings defined with the html-attributes helper will always win over attribute bindings that are defined on the class.

{{!-- The role will be "foo" --}}

{{x-bar (html-attributes role="foo") ariaRole="bar"}}

Supported Versions of Ember

This addon is guaranteed to work with Ember 2.8 and up. It may work with older versions as well although the earliest working version is unknown.

Limitations

This addon is implemented with a naive Glimmer AST transform so you can't do fancy things like

{{my-component (if foo (html-attributes data-foo="true") (html-attributes data-bar="true"))}}

If this feature is accepted into the Ember core then we will consider removing this limitation.

About

Easily bind attributes to your ember components

Resources

License

Packages

No packages published
You can’t perform that action at this time.