javascript Knockout：根据 observable 的值更改 css 类
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13453413/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Knockout: Change css class based on value of observable
提问by mupersan82
I use foreach on an observable array:
我在可观察数组上使用 foreach：
<div id="mainRight" data-bind="foreach: notifications">
<div class="statusRow">
<div class="leftStatusCell">
<div class="leftStatusCellColor" data-bind="css: availabilityCssClass($data.availability)"></div>
</div>
<div class="topRightStatusCell" data-bind="text: sip"></div>
<div class="bottomtRightStatusCell ellipsisSingleline" data-bind="text: note"></div>
</div>
</div> <!== end mainRight ==>
As you can see, I pass the current value of availability to the function availabilityCssClass, which compares the value to some predefined strings. Depending on the matching string, it returns a class name.
如您所见，我将可用性的当前值传递给函数 availabilityCssClass，该函数将值与一些预定义的字符串进行比较。根据匹配的字符串，它返回一个类名。
self.availabilityCssClass = ko.computed(function (value) {
var availability = value;
if (availability === "Busy" || "DoNotDisturb" || "BeRightBack")
return "leftStatusCellColorOrange";
else if (availability === "Away" || "Offline")
return "leftStatusCellColorRed";
else
return "leftStatusCellColorGreen";
});
This is my model. The data comes from an external data source.
这是我的模型。数据来自外部数据源。
function Notification(root, sip, availability, note) {
var self = this;
self.sip = ko.observable(sip);
self.availability = ko.observable(availability);
self.note = ko.observable(note);
};
self.notifications = ko.observableArray();
However, it doesnt work as is. When the computed function is not commented out, the foreach does not iterate over the data and the div is empty. But I can see that the viewModel is not empty.
但是，它不能按原样工作。当计算出的函数没有被注释掉时，foreach 不会迭代数据并且 div 为空。但是我可以看到 viewModel 不是空的。
采纳答案by Artem Vyshniakov
You cannot pass value into computed in such way. It is better to add this computed to Notificationview model and use self.availabilityproperty:
您不能以这种方式将值传递给计算。最好将此计算添加到Notification查看模型和使用self.availability属性：
function Notification(root, sip, availability, note) {
var self = this;
self.sip = ko.observable(sip);
self.availability = ko.observable(availability);
self.note = ko.observable(note);
self.availabilityCssClass = ko.computed(function() {
var availability = self.availability();
if (["Busy", "DoNotDisturb", "BeRightBack"].indexOf(availability) != -1) return "leftStatusCellColorOrange";
else if (["Away", "Offline"].indexOf(availability) != -1) return "leftStatusCellColorRed";
else return "leftStatusCellColorGreen";
});
};
Your ifstatement wasn't correct, so I fixed the logic. Here is working fiddle: http://jsfiddle.net/vyshniakov/Jk7Fd/
你的if说法不正确，所以我修正了逻辑。这是工作小提琴：http: //jsfiddle.net/vyshniakov/Jk7Fd/
回答by Michael Best
You just need to make availabilityCssClassa function. As you've written it, it's not a computed observable since it has no observable dependencies.
你只需要创建availabilityCssClass一个函数。正如你所写的，它不是一个计算的 observable，因为它没有可观察的依赖关系。
self.availabilityCssClass = function (value) {
var availability = value;
if (availability === "Busy" || "DoNotDisturb" || "BeRightBack")
return "leftStatusCellColorOrange";
else if (availability === "Away" || "Offline")
return "leftStatusCellColorRed";
else
return "leftStatusCellColorGreen";
};
回答by Anders
The CSS binding wants a object literal with the name of the CSS class as member name and the value true or false depeding on you want to remove or add the class
CSS 绑定需要一个对象字面量，其中 CSS 类的名称作为成员名称，值 true 或 false 取决于您要删除或添加该类
data-bind="css: { 'css-class-name': true }"
edit: Hmm, they have changed the css binding in 2.2 ;)
编辑：嗯，他们在 2.2 中更改了 css 绑定；)
