CODEWITHSUNDEEP
ember.js
Aaron Renoir
Aaron Renoir

Reputation: 4381

emberjs bind data attributes

I am wondering if there is a way to bind data attributes in a template when calling a view.

For example (this doesn't work):

 {{ view App.SomeView data-dateBinding="currentDate" }}

I have ended up doing it this way: 

<a {{bindAttr data-date="currentDate"}}></a>

There must be a way to do it when calling the view?

Upvotes: 13

Views: 7704

Answers (3)

captainpete
captainpete

Reputation: 6222

More on the excellent answer from @kurt-ruppel.

An example using : to describe the property for attribute binding, entirely done from the view.

App.SomeView = Ember.View.extend({
  attributeBindings: ["date:data-date"],
  date: function() { return '1642-12-06' }
  .... rest of view
})

The cleaner template.

{{view App.SomeView}}

Upvotes: 13

Kurt Ruppel
Kurt Ruppel

Reputation: 131

FWIW - and this is in response to @sly7_7's comments from the top answer -, it is possible to specify a data-* attribute binding in the view itself, as opposed to setting it in the template.

Similar to classNameBindings, you can prepend a preferred value to the attribute, joining the values with a ':'. Best place to see this in action is probably in the related ember.js tests. Gives credence to the value of good testing, seeing as how sometimes it serves as the best documentation.

Upvotes: 2

Bradley Priest
Bradley Priest

Reputation: 7458

You have to define in App.SomeView which attributes you want put in the HTML.

App.SomeView = Ember.View.extend({
  attributeBindings: ["data-date"]
  .... rest of view
})

Now data-dateBinding should work:

{{view App.SomeView data-dateBinding="currentDate" }}

Upvotes: 10

Related Questions