Question

My question is very close to Setting id and className dynamically in Backbone.js views, but for batman.js.
In batman there are data-addclass method, but I need something like this:

<span data-class="item.color"></span>

What will produce for example:

<span class="yellow"></span>

What is the best practice to perform such things in batman.js? Maybe I should use data-bind and detect class with jquery?

Answer 1

The easiest way to do that would be to just perform a data-bind- directly onto the attribute you would like to change, in this case class.

<span data-bind-class="someBatmanVariable">Here is my content</span>

Where someBatmanVariable is just something you’ve set up in the controller which resolves to the class you’d like the span to have.

You can take it further and put whatever you’d like just about anywhere. You can bind to most attributes and they’ll update. Don’t forget that by not specifying an attribute (a vanilla data-bind) Batman will default to something logical, usually the contents of the tag or, in the case of input elements, the value.

Finally, be sure to take a look at the Batman view filters. You can massage the output quite a bit.