Skip to content

mmun/ember-component-attributes

master
Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
Code

Latest commit

 

Git stats

Files

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

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.