Question

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

但是在数据库中存储的颜色可以为null，所以我想添加一个默认颜色blue，因为它是null，所以它看起来不像是坏了还是错了

Answer 1

您可以使用||运算符combine the return from your observable with your desired default value：

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

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

Answer 2

让我建议使用您的视图模型来更仔细地在视图中建模您想要的内容。不要将默认逻辑放入HTML中，而是将其放入viewmodel中，方法是更改storedColor的值，或者使用单独的计算器来处理默认值。

更进一步，不是指定样式绑定参数的对象文字，而是可以使用一个简单的函数（或者，等效地，计算的observable），并且处理应用该样式的所有逻辑在你的代码中。无论要做多少工作，您的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>

添加默认为knockout样式绑定

2 个答案: