Question

I wish to set different data-theme attributes depending on the model\object state.
Here I’m just setting ‘b’ or ‘d’ for the data-theme attribute (jQuery Mobile).
I can get it to work with:

<!-- ko if: $data.id() == $parent.selectedMatchId() -->
    <li data-bind="text: $data.date" data-theme="b"></li>
<!-- /ko -->
<!-- ko ifnot: $data.id() == $parent.selectedMatchId() -->
   <li data-bind="text: $data.date" data-theme="d"></li>
<!-- /ko -->

which is a bit ugly. I thought (hoped) I’d be able to use an expression inside the attribute binder, but the Knockout binding engine doesn’t like what I give it.

<li data-bind="text: $data.date,
      attr: {'data-theme' : $data.id() == $parent.selectedMatchId() : 'd' ? 'b'}"></li>

Is there a cleaner way to do this than the ‘ko if’ and ‘ko ifnot’ that I’m using?

Answer 1

You can use the template binding. With this binding, you can choose dynamically what template to use.

The documentation is here : http://knockoutjs.com/documentation/template-binding.html#note_4_dynamically_choosing_which_template_is_used