Question

我有一种情况，我希望根据对象的值有条件地格式化某个区域的背景颜色。在这种情况下，它是一件家具及其serialNumber。当然，这是简化的，因为我真的想要三重条件。值是0,1还是2，但我甚至无法使用更简单的条件。

不知道为什么它不起作用。好像它应该足够简单。这是你的小提琴：

HTML

<tr data-bind="foreach: furnitures" id="furnitureArea" data-bind="style: { backgroundColor: serialNumber > 1 ? 'red' : 'grey' }">

的JavaScript

var Room = function (name, furnitures) {
  var self = this;
  self.name = ko.observable(name);
  self.furnitures = ko.observableArray([]);
  self.serialNumber = ko.observable();
  ...

Answer 1

在HTML片段中，您需要像数据绑定一样调用serialNumber函数

<tr data-bind="foreach: furnitures" id="furnitureArea" data-bind="style: { backgroundColor: serialNumber() > 1 ? 'red' : 'grey' }

JSFiddle

或者为了更好的解决方案，在家具视图模型中创建一个淘汰计算函数，并将所有逻辑移到那里。

var Furniture = function (data) {
    var self = this;
    self.name = ko.observable('');
    self.size = ko.observable('');
    self.serialNumber = ko.observable();
    self.rowStyle = ko.computed({
        read: function () {
            return self.serialNumber() > 1 ? 'red' : 'grey'';
        },
        deferEvaluation: true
    });

    if (typeof data !== 'undefined') {
        self.name(data.name);
        self.size(data.size);
        self.serialNumber(data.serialNumber);
    }
}

<tr data-bind="foreach: furnitures" id="furnitureArea" data-bind="style: { backgroundColor: rowStyle}

Updated JSFiddle

Answer 2

缺少()

<tr data-bind="foreach: furnitures" id="furnitureArea" data-bind="style: { backgroundColor: serialNumber() > 1 ? 'red' : 'grey' }">

如果要处理可观察值，请确保使用()

针对可观察数量的Knockout条件格式不起作用

2 个答案: