可观察数字的挖空条件格式不起作用

Question

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

不知道为什么它不起作用。似乎应该很简单。这是给你的小提琴：

http://jsfiddle.net/Lxh8e9qv/1/

.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片段中，你需要像这样调用数据绑定中的序列号函数

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

更新的 JSFiddle

Answer 2

缺少()

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

当您想要处理可观察值时，请确保使用()