KnockoutJS Observable 未在模板中更新

Posted 2023-03-27

【中文标题】KnockoutJS Observable 未在模板中更新

【英文标题】：KnockoutJS Observable not updating in template

【发布时间】：2020-05-05 20:17:11

【问题描述】：

我在 Knockout JS 中类更新的跨度上有一个切换。当我注销 Observable 的值时，它是正确的。但是，复选框的类不会按预期切换。这是我正在使用的 JS 和模板代码...

JS

viewModel.toggleRequiredAnswer = function(self, index) 
    // Other unrelated code using index param here
  var checkedTest = viewModel
      .data()
      .conditionalRequired.requiredIf.some(function(arr) 
        return arr === index;
    );
    self.isChecked = ko.observable(checkedTest);
;

KnockoutJS 模板

<ul class="list" data-bind="foreach: list">
    <li>
        <span
          class="glyphicon glyphicon-admin"
          data-bind="
                    click: $parent.toggleRequiredAnswer($data, $data.value),
                    css: $data.isChecked() ? 'glyphicon-check' : 'glyphicon-unchecked'"
        >
            </span>
        <span data-bind="text: $data.text"></span>
    </li>
</ul>

【参考方案1】：

当函数 toggleRequiredAnswer 被调用时，你会用一个新的 observable 覆盖 self.isChecked 属性，并且剔除视图正在失去与它的关系。函数toggleRequiredAnswer 应该如下所示：

viewModel.toggleRequiredAnswer = function(self, index) 
    // Other unrelated code using index param here
  var checkedTest = viewModel
      .data()
      .conditionalRequired.requiredIf.some(function(arr) 
        return arr === index;
    );
    self.isChecked(checkedTest);
;