挖空.js CSS 绑定语法问题

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，以及其他浏览器，都会忽略单选按钮上的样式。

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

另一种方法是制作单独的输入+标签，而不是嵌套的标签，并使用CSS对:checked状态做出反应。下面使用 RP Niemeyer 非常有用的uniqueId和uniqueFor自定义绑定。

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