淘汰赛-如何从一组复选框绑定外部容器CSS? [英] Knockout - How to bind outer container css from set of checkboxes?

问题描述

好吧，这个问题的语法太可怕了，但这是缺点:

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

我在网站上使用以下内容:

I'm using the following in my site:

• Twitter引导程序
• 淘汰赛
• Durandal

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

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>

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

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/

我认识到可以使用$ data对象获取当前项目，但是我不知道如何检查并查看当前项目($ data.text)是否在checkedValues observableArray中.我确定我可能缺少基本的Javascript，但是有什么方法可以在不使用计算值的情况下做到这一点?

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?

推荐答案

您可以直接在css绑定中通过检查父级的checkedValues数组来执行此操作.

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

参见小提琴

这篇关于淘汰赛-如何从一组复选框绑定外部容器CSS?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！