javascript - for - Entrada de radio en knockout observable. Array pierde control luego de empalmar

ko js if

Question

Tener una entrada de radio dentro de un elemento multiplicado por knockout foreach.

Dale un Array observable a ese foreach.

Haga una función para cambiar dos de estos elementos.

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());

violín: https://jsfiddle.net/hejdav/6dzg9hs8/17/

Ahora - verifique ambas radios, luego cambie. ¿Ver? Una de las radios pierde su control.

Alguna idea para evitar esto?

Una cosa extraña: la pérdida solo se produce cuando se controlan ambas radios.

Answer 1

Como no ha enlazado la propiedad checked , el estado verificado no tiene sentido para Knockout. Pensé que simplemente con una unión observable y checked haría que Knockout mantuviera las cosas en forma. No es así: parece que has encontrado un error.

Por alguna razón, Knockout no está configurando el último elemento nuevo en la lista correctamente. Pude corregirlo agregando una llamada a valueHasMutated en el observador checked por el último elemento en cuadros.

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());

<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>