Question

在元素中输入无线电输入乘以 knockout foreach。

将 observableArray 添加到该foreach中。

创建一个函数来切换其中两个元素。

HTML：

<!-- ko foreach: boxes -->
<div>
  <!-- ko text: $data --><!-- /ko -->:
  <label><input type=radio value=apple data-bind="attr: { name: 'fruit-' + $index() }">apple</label>
  <label><input type=radio value=banana data-bind="attr: { name: 'fruit-' + $index() }">banana</label>
</div>
<!-- /ko -->
<button data-bind="click: switchBoxes">switch</button>

JS：

var viewModel = function () {
    this.boxes = ko.observableArray(['First', 'Second']);

  this.switchBoxes = function () {
    this.boxes.splice(0, 2, this.boxes()[1], this.boxes()[0]);
  };
};

ko.applyBindings(new viewModel());

小提琴： https://jsfiddle.net/hejdav/6dzg9hs8/17/

现在 - 检查两个无线电，然后切换。看到？其中一个收音机失去了支票。

有任何想法阻止这种情况吗？

一件奇怪的事情：只有在检查了两个无线电时才会丢失。

Answer 1

由于您尚未绑定checked属性，因此检查状态对于Knockout没有意义。我曾经以为只需要一个可观察的checked绑定就可以让Knockout保持良好状态。不是这样：你似乎找到了一个错误。

出于某种原因，Knockout没有正确设置列表中的新最后一项。我能够通过在valueHasMutated上添加对checked的调用来对其进行更正，并对框中的最后一项进行观察。

＆＃13;

var viewModel = function() {
  this.boxes = ko.observableArray([{
    name: 'First',
    value: ko.observable('')
  }, {
    name: 'Second',
    value: ko.observable('')
  }]);

  this.switchBoxes = function() {
    const arr = this.boxes();

    this.boxes.splice(0, 2, arr[1], arr[0]);
    arr[1].value.valueHasMutated();
  };
};

ko.applyBindings(new viewModel());

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<!-- ko foreach: boxes -->
<div>
  <!-- ko text: name -->
  <!-- /ko -->
  (
  <!-- ko text: value -->
  <!-- /ko -->):
  <label><input type=radio value=apple data-bind="attr: { name: 'fruit-' + $index() }, checked: value">apple</label>
  <label><input type=radio value=banana data-bind="attr: { name: 'fruit-' + $index() }, checked: value">banana</label>
</div>
<!-- /ko -->

<button data-bind="click: switchBoxes">switch</button>

＆＃13;

击倒时的无线电输入observableArray在拼接后丢失检查

1 个答案: