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绑定。

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

＆＃13;

// 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"},
    ]
});

＆＃13;

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

＆＃13;

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

＆＃13;

knockout.js css-binding语法问题

1 个答案: