Knockout - How to bind outer container css from set of checkboxes?

Question

OK, admittedly horrible grammar in the question, but here's the lowdown:

I'm using the following in my site:

• Twitter Bootstrap
• Knockout
• Durandal

I'm trying to add a css class to the outer label surrounding a checkbox (in a list of checkboxes) so it can highlight the selected checkboxes. Essentially the code is this:

<div data-bind="foreach:values">
    <label class="checkbox inline btn" data-bind="css: { }">
        <input type="checkbox" data-bind="attr: { value: text }, checked: $parent.checkedValues" /> 
        <span data-bind="text: text"></span>
    </label>
</div>

So, what I'm trying to do is to add the btn-primary class to the outer label for the checkboxes that are checked. Rather than put the full viewmodel in here, I've created a Fiddle: http://jsfiddle.net/riceboyler/WEPRZ/1/

I recognize that I can use the $data object to get the current item, but I can't figure out how to check and see if the current item ($data.text) is in the checkedValues observableArray. I'm sure it's probably basic Javascript that I'm missing, but is there any way to do this without using a computed value?

Answer 1

You can do this directly in the css binding by inspecting the parent's checkedValues array.

<label 
    class="checkbox inline btn" 
    data-bind="css: {'btn-primary': $parent.checkedValues.indexOf(text) > -1}">

See the Fiddle

Answer 2

You can try this predicate :

$parent.checkedValues().indexOf($data.text) >= 0

I created a new version your fiddle.

I hope this helps.