Ember.Handlebars.helpers Class


Module: ember-htmlbars

Show:

Methods

Show:

bind-attr

(options) String deprecated public

bind-attr allows you to create a binding between DOM element attributes and Ember objects. For example:

1
<img {{bind-attr src=imageUrl alt=imageTitle}}>

The above handlebars template will fill the <img>'s src attribute with the value of the property referenced with imageUrl and its alt attribute with the value of the property referenced with imageTitle.

If the rendering context of this template is the following object:

1
2
3
4
{
  imageUrl: 'http://lolcats.info/haz-a-funny',
  imageTitle: 'A humorous image of a cat'
}

The resulting HTML output will be:

1
<img src="http://lolcats.info/haz-a-funny" alt="A humorous image of a cat">

bind-attr cannot redeclare existing DOM element attributes. The use of src in the following bind-attr example will be ignored and the hard coded value of src="/failwhale.gif" will take precedence:

1
<img src="/failwhale.gif" {{bind-attr src=imageUrl alt=imageTitle}}>

bind-attr and the class attribute

bind-attr supports a special syntax for handling a number of cases unique to the class DOM element attribute. The class attribute combines multiple discrete values into a single attribute as a space-delimited list of strings. Each string can be:

  • a string return value of an object's property.
  • a boolean return value of an object's property
  • a hard-coded value

A string return value works identically to other uses of bind-attr. The return value of the property will become the value of the attribute. For example, the following view and template:

1
2
3
4
5
  AView = View.extend({
    someProperty: function() {
      return "aValue";
    }.property()
  })
1
<img {{bind-attr class=view.someProperty}}>

Result in the following rendered output:

1
<img class="aValue">

A boolean return value will insert a specified class name if the property returns true and remove the class name if the property returns false.

A class name is provided via the syntax somePropertyName:class-name-if-true.

1
2
3
AView = View.extend({
  someBool: true
})
1
<img {{bind-attr class="view.someBool:class-name-if-true"}}>

Result in the following rendered output:

1
<img class="class-name-if-true">

An additional section of the binding can be provided if you want to replace the existing class instead of removing it when the boolean value changes:

1
<img {{bind-attr class="view.someBool:class-name-if-true:class-name-if-false"}}>

A hard-coded value can be used by prepending : to the desired class name: :class-name-to-always-apply.

1
<img {{bind-attr class=":class-name-to-always-apply"}}>

Results in the following rendered output:

1
<img class="class-name-to-always-apply">

All three strategies - string return value, boolean return value, and hard-coded value – can be combined in a single declaration:

1
<img {{bind-attr class=":class-name-to-always-apply view.someBool:class-name-if-true view.someProperty"}}>

Parameters:

options Object

Returns:

String
HTML string

bindAttr

(context, options) String deprecated public

See bind-attr

Parameters:

context Function
options Object

Returns:

String
HTML string

linkTo

(routeName, context) String deprecated private

See link-to

Parameters:

routeName String
context [Object]

Returns:

String
HTML string