How do I set an element's class using data-win-bind

Question

I'm trying to dynamically set the class of a listview item template:

<div id="semanticZoomTemplate" data-win-control="WinJS.Binding.Template" style="display: none">
    <h1 class="semanticZoomItem-Text" data-win-bind="innerText:title;class:contains"></h1>
</div>

But data-win-bind fails to do anything when 'class' is present as a property-name.

Is there a correct way to styling specific items in a listview if indeed I can't change the class with data-win-bind?

Crowded

Answer 1

You need to set the JavaScript class property, which is not called "class", but "className".

Follicle

Thanks! data-win-bind="innerText:title;className:contains" works great. – Crowded

Hi @ChristiaanV, do you know if using class="other" data-win-bind="className:contains" replaces the class attribute or appends the binding to the existing? – Brainwork

By default it overrides the "other" class. I know that you can build converters, which you can add in your binding, but don't know exactly if you can build a converter that can make the class append. – Follicle