CODEWITHSUNDEEP
ember.js
blueFast
blueFast

Reputation: 44351

Binding several attributes to the same element

I am trying to do something like this:

<a href="#/{{unbound goto}}" {{bind-attr class=":menu-entry-text :nowrap active:selected-menu-entry-text"}} {{bind-attr id="active:active-nav:inactive-nav"}} {{bind-attr data-goto="goto"}}>

But only the first attribute (class) gets set: id and data-goto are not defined. Is it possible to set several attributes with bind-attr in the same element? How?

Upvotes: 2

Views: 471

Answers (1)

Peter Brown
Peter Brown

Reputation: 51697

Yes you can bind several attributes at once by either using multiple bind-attr helpers like in your example, or just putting all the attributes in a single bind-attr helper. You have an issue in your example though, which is why things aren't working as expected.

The "value if true" form that you're using for the class attribute cannot be applied to other types of attributes. All other attributes must be bound to a dynamic property on the controller. For example, if you had a controller that looked like this:

App.MyController = Ember.ObjectController.extend({
  myId: function() {
    if (this.get("active") === true) {
      "active-nav"
    } else {
      "inactive-nav"
    }
  }.property("active")
});

Then you would bind that like so:

<a href="#/{{unbound goto}}" {{bind-attr id="myID"}}>

Just a side note on that example, it's probably a code smell if you have a dynamic ID for an HTML element. IDs are supposed to uniquely identify a single element and I wouldn't expect them to change. It seems like a class would be a better fit for this use case.

Upvotes: 1

Related Questions