javascript - Knockout - 如何从一组复选框绑定(bind)外部容器 CSS？

Question

好吧，诚然，这个问题的语法很糟糕，但事实是这样的:

我在我的网站中使用以下内容:

• Twitter Bootstrap
• knockout
• Durandal

我正在尝试将 css 类添加到复选框周围的外部标签(在复选框列表中)，以便它可以突出显示所选的复选框。本质上代码是这样的:

<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>

所以，我想做的是将 btn-primary 类添加到选中的复选框的外部标签中。我没有将完整的 View 模型放在这里，而是创建了一个 fiddle :http://jsfiddle.net/riceboyler/WEPRZ/1/

我认识到我可以使用 $data 对象来获取当前元素，但我不知道如何检查并查看当前元素 ($data.text) 是否在 selectedValues observableArray 中。我确信我可能缺少基本的 Javascript，但是有没有办法在不使用计算值的情况下做到这一点？

Answer 1

您可以通过检查父级的 checkValues 数组，直接在 css 绑定(bind)中执行此操作。

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

See the Fiddle