样式背景颜色属性在可观察对象更改时未更新

Question

我无法弄清楚为什么我的模板中的背景颜色样式在选中复选框时没有更新。

在我的 div 标签中我有：

data-bind="style: {"backgroundColor": isChecked == true ? "#00796B" : "#999"}"

我想在选中或取消选中复选框时更改 div 标签的背景颜色。现在背景颜色没有改变，但我对输入标签的检查似乎按预期工作。

function checkboxViewModel(params) {
    var self = this;
    self.isChecked = ko.observable(params.isChecked || false);
    self.isDisabled = ko.observable(params.isDisabled || false);
}

ko.components.register('material-checkbox', {
    viewModel: checkboxViewModel,
    template:
      '<div class="checkbox" data-bind="style: {"backgroundColor": isChecked == true ? "#00796B" : "#999"}>' +
      '<input type="checkbox" id="checkbox" data-bind="css: {disabled: isDisabled}, checked: isChecked, disabled: isDisabled" />' +
      '<label for="checkbox"></label>' +
      '</div>'
});

ko.applyBindings();

.checkbox{
  width: 20px;
  height: 20px;
  background-color: #999;
  position: relative;
  border-radius: 3px;

  input{
    visibility: hidden;

    &:checked + label{
      background-color: #00796B;

      &:before{
        opacity: 1;
      }
    }
  }

  input.disabled{
    &:checked + label{
      background-color: #999;

      &:before{
        opacity: 1;
      }
    }
  }

  label{
    width: 16px;
    height: 16px;
    position: absolute;
    top: 2px;
    left: 2px;
    background-color: white;
    border-radius: inherit;

    &:before{
      content: "";
      width: 12px;
      height: 6px;
      border: 2px solid white;
      border-top: none;
      border-right: none;
      position: absolute;
      -webkit-transform: rotate(-45deg); /* Chrome, Safari, Opera */
      transform: rotate(-45deg);
      top: 2px;
      left: 1px;
      opacity: 0;
    }
  }
}

<link href="checkbox.less" rel="stylesheet/less" type="text/css" />
<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/2.5.3/less.min.js"></script>

<material-checkbox params:"isChecked: false, isDisabled: false"></material-checkbox>

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.0/knockout-debug.js"></script>
<script src="checkbox.js"></script>

Answer 1

您有几个拼写错误和小的语法问题，最明显的是：

isChecked == true 应该将 isChecked 作为函数调用，因为它是可观察的。如果你想在一个复杂的表达式中使用一个可观察对象，你必须做 isChecked()。只有在更简单的场景中，您直接绑定到可观察对象，您才可以省略括号（例如 checked: isChecked）。
你模板中的引号乱七八糟；

如果您修复这些问题，backgroundColor 绑定将正常工作：

function checkboxViewModel(params) {
    var self = this;
    self.isChecked = ko.observable(params.isChecked || false);
}

ko.components.register('material-checkbox', {
  viewModel: checkboxViewModel,
  template:
    '<div class="checkbox" data-bind="style: {\'backgroundColor\': isChecked() == true ? \'#00796B\' : \'#999\'}">' +
    '<input type="checkbox" data-bind="checked: isChecked" />' +
    '</div>'
});

ko.applyBindings();

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/less.js/2.5.3/less.min.js"></script>

<material-checkbox params:"isChecked: false, isDisabled: false"></material-checkbox>

样式背景颜色属性在可观察对象更改时未更新

Style background-color property not being updated when the observable is changed

styles

background-color

observable

knockout.js

样式背景颜色 属性 在可观察对象更改时未更新

Style background-color property not being updated when the observable is changed

styles

background-color

observable

knockout.js

样式背景颜色属性在可观察对象更改时未更新