为淘汰样式绑定添加默认值

Question

我有这个data-bind="style: { 'background-color': storedColor }"

但是存储的颜色在数据库中可以为null，所以我想添加一个默认颜色blue，以防它为null，这样看起来就不会损坏或出现错误

您可以使用||运算符将可观测值的返回值与所需的默认值结合起来：

data-bind="style: { 'background-color': storedColor() || 'blue' }"

如果storedColor()为空，则||运算符将改为返回'blue'。

让我建议，使用视图模型来更紧密地建模视图中所需的内容是一个好主意。与其将默认逻辑放入HTML中，不如将其放入视图模型中，方法是更改storedColor的值，或者使用单独的计算来处理默认逻辑。

更进一步，您可以在那里使用一个简单的函数（或者等效地，一个计算的可观察对象），而不是为样式绑定参数指定对象文字，并且在代码中处理如何应用该样式的所有逻辑。无论要做多少麻烦，HTML标记都保持简单。

vm = {
  colors: ['red', 'green', 'yellow', 'blue'],
  sizes: ['25', '35', '45', '50'],
  selectedColor: ko.observable(),
  selectedSize: ko.observable('25'),
  myStyle: function() {
    var mySize = vm.selectedSize() + 'pt',
      myColor = vm.selectedColor() || 'blue';
    return {
      height: mySize,
      width: mySize,
      'background-color': myColor
    };
  }
};
ko.applyBindings(vm);

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/2.3.0/knockout-min.js"></script>
<div data-bind="style: myStyle()"></div>
<select data-bind="options:colors, optionsCaption:'(color)', value: selectedColor"></select>
<select data-bind="options:sizes, value: selectedSize"></select>