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

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()。只有在更简单的情况下，您才可以直接绑定到observable，您可以省略括号（例如使用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>