javascript - knockout.js css 绑定(bind)语法问题

Question

我正在尝试制作一个单选按钮过滤器，当它被选中时它会改变它的背景颜色。现在它看起来像这样:

           <div data-bind="visible: applications().length > 0">
                            <label>Filter: </label>
                            <label class="radio-inline">
                                <input type="radio" value="new" data-bind="checked: applicationsFilter, css: {selected: applicationsFilter}" class="" />
                                New / Pending Review
                                (<span data-bind="text: newApplicationsCount"></span>)
                            </label>
                            <label class="radio-inline">
                                <input type="radio" value="shortlisted" data-bind="checked: applicationsFilter, css: {selected: applicationsFilter}" />
                                Shortlisted
                                (<span data-bind="text: shortlistedApplicationsCount"></span>)
                            </label>
                            <label class="radio-inline">
                                <input type="radio" value="connected" data-bind="checked: applicationsFilter, css: {selected: applicationsFilter}}" />
                                Connected
                                (<span data-bind="text: connectedApplicationsCount"></span>)
                            </label>
                            <label class="radio-inline">
                                <input type="radio" value="all" data-bind="checked: applicationsFilter, css: {selected: applicationsFilter}" />
                                All
                                (<span data-bind="text: allApplicationsCount"></span>)
                            </label>
                            <label class="radio-inline" data-bind="visible: applications().length > 0">
                                <input type="checkbox" data-bind="checked: showHiddenApplications" />
                                Include Hidden
                            </label>
                        </div>

我的意图是在选择单选按钮时应用 .selected 类

 data-bind="checked: applicationsFilter, css: {selected: applicationsFilter}}

但输出实际上并没有应用 css 样式。这样做的正确方法是什么？

谢谢

Answer 1

执行此操作的正确方法是进行实际比较，计算结果为 true 或 false:

css: {selected: applicationsFilter() == 'new'}

但您可能还会遇到以下问题 - 特别是 Firefox，但其他浏览器也是如此 - ignore styles on radio buttons .

一种选择是在 label 而不是 input 上使用 css 绑定(bind)。

另一种方法是制作单独的输入+标签，而不是嵌套的，并使用 CSS 对 :checked 状态使用react。下面使用非常有帮助的uniqueId and uniqueFor custom bindings by RP Niemeyer .

// uniqueId/uniqeFor custom bindings by @RPNiemeyer, https://stackoverflow.com/a/9235013/18771
ko.bindingHandlers.uniqueId = {
    init: function(element, valueAccessor) {
        var value = valueAccessor();
        value.id = value.id || ko.bindingHandlers.uniqueId.prefix + (++ko.bindingHandlers.uniqueId.counter);

        element.id = value.id;
    },
    counter: 0,
    prefix: "unique"
};

ko.bindingHandlers.uniqueFor = {
    init: function(element, valueAccessor) {
        var value = valueAccessor();
        value.id = value.id || ko.bindingHandlers.uniqueId.prefix + (++ko.bindingHandlers.uniqueId.counter);

        element.setAttribute("for", value.id);
    } 
};


ko.applyBindings({
    applicationsFilter: ko.observable(),
    filterOptions: [
        {value: "new", label: "New / Pending Review"},
        {value: "shortlisted", label: "Shortlisted"},
        {value: "connected", label: "Connected"},
        {value: "all", label: "All"},
    ]
});

.radio-inline:checked+label {
    border: 1px solid red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>

<div data-bind="foreach: filterOptions">
    <input type="radio" class="radio-inline" data-bind="value: value, checked: $parent.applicationsFilter, uniqueId: $data" />
    <label data-bind="text: label, uniqueFor: $data"></label>
</div>

<pre data-bind="text: ko.toJSON($root, null, 2)"></pre>