No se puede arrastrar y soltar artículos de un ordenador a otro dentro de un foreach

Question

Estoy usando knockout / jquery-ui / knockout-sortable.

Quiero arrastrar y soltar artículos de un ordenador a otro.Consulte este PLNKR por ejemplo.Intente arrastrar un artículo de la primera fila a la segunda fila.Las matrices observables subyacentes se actualizan, pero la UI es inconsistente.Parece que el arrastre y la caída se están cancelando y Knockout no está actualizando la UI como debería.

Funciona bien cuando los Orificios se especifican manualmente, pero deja de funcionar cuando los creo dentro de un enlace foreach.¿Alguien sabe lo que estoy haciendo mal?

El JavaScript:

  $(function() {
      viewModel = {
        firstItems : ko.observableArray(["Item 1", "Item 2", "Item 3", "Item 4"]),
        secondItems : ko.observableArray(["Item A", "Item B", "Item C", "Item D"]),
        thirdItems : ko.observableArray(["Item W", "Item X", "Item Y", "Item Z"])
      };

      viewModel.allItems = ko.observableArray([viewModel.firstItems, viewModel.secondItems, viewModel.thirdItems]);

      ko.applyBindings(viewModel);
  });

El markup:

<div id="rows" data-bind="foreach: allItems">

  <ul class="row" data-bind="sortable: $data">
    <li data-bind="text: $data"></li>
  </ul>

</div>

Answer 1

El complemento sortable espera estar tratando con un observableMarray.En su caso, según la forma en que funciona foreach, $data se desenvuelve a la matriz subyacente.

Dos formas en que podría arreglarlo:

1. Use $rawData en lugar de $data ( http://knockoutjs.com/documentation/binding-Context.html ) en la unión sortable para enlazar contra la ruta de observable en lugar de su valor sin envolver.

2. Use una matriz de objetos con una propiedad que contenga la Rraation de observable como:

   viewModel.allItems = ko.observableArray([
       { items: viewModel.firstItems }, 
       { items: viewModel.secondItems },
       { items: viewModel.thirdItems }
   ]);
   

Luego, vincule contra items en lugar de $data.