Question

我正在对样式应用绑定，并成功根据两种情况进行背景颜色更改。目前它说如果状态为'START'，则将背景设为＃d10000，否则为背景＃93d667。

style: { background: ManagerStatus() == 'START' ? '#d10000' : '#93d667' }

我想要以下功能：

如果START，请＃d10000 否则，如果继续，请＃93d667 否则＃f7f7f7

如何在Knockout绑定中实现这些多个case语句？

此致

珊

Answer 1

您可以避免使用条件逻辑填充html，并在viewmodel中创建一个knockout computed observable，如下所示：

// or however your viewModel is currently set up.
var viewModel = {
   ManagerStatus: ko.observable() 
}

viewModel.statusBackground = ko.computed(function() {
    status = this.ManagerStatus(),

    switch (status) {
        case "START": return "#d10000";
        case "CONTINUE": return "#93d667";
        default: return #f7f7f7;
    }
}, viewModel);

HTML

style: { background: statusBackground }

Answer 2

你可以通过嵌套两个三元运算符表达式来实现。但这样做并不是一个好主意：修改视图模型会更好，并包含一个返回背景颜色的计算observable。像这样：

var vm = function() {
  var self = this;
  self.ManagerStatus = ko.observable();
  self.backgroundcolor = ko.computed(function() {
     ManagerStatus() == 'START'
        ? '#d10000' : ManagerStatus() == 'CONTINUE'
                      ? '#93d667' : '#f7f7f7';
  });
  return self;
};

绑定就像这样：

style: { background: backgroundcolor }

请注意，在这种情况下，您可以使用pure computed，而不是常规computed。

注意：我已经展示了如何编写嵌套的三元运算符，您可以将它包含在绑定表达式中。但是，如果它在视图模型定义中看起来很丑，那么它在绑定表达式中会更难看。实际上，我不会在视图模型定义中这样写它。最好使用链式if else或switch来提高其可读性。

Answer 3

谢谢你们。为了将来的参考，有人向我展示了你可以在data-bind属性中实际拥有多个案例：

{background：ManagerStatus（）=='START'？ '＃d100000':( ManagerStatus（）=='CONTINUE'？'＃93d667'：'＃f7f7f7'）}

Alexandra

使用多个If语句进行Knockout绑定

3 个答案: