Impossibile trascinare e rilasciare elementi da un elemento ordinabile a un altro all'interno di un foreach

Question

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

Voglio trascinare e rilasciare gli elementi da un ordinabile all'altro.Vedere questo plannkr Per esempio.Prova a trascinare un elemento dalla prima riga alla seconda riga.Gli array osservabili sottostanti vengono aggiornati ma l'interfaccia utente non è coerente.Sembra che il trascinamento della selezione sia stato annullato e Knockout non aggiorna l'interfaccia utente come dovrebbe.

Funziona bene quando gli ordinabili vengono specificati manualmente ma smette di funzionare quando li creo all'interno di un'associazione foreach.Qualcuno sa cosa sto facendo di sbagliato?

Il 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);
  });

Il 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

IL sortable il plugin si aspetta di avere a che fare con un observableArray.Nel tuo caso, in base al modo in cui foreach lavori, $data viene effettivamente scartato nell'array sottostante.

Due modi per risolverlo:

1. Utilizzo $rawData invece di $data (http://knockoutjs.com/documentation/binding-context.html) nel sortable associazione per legarsi all'observableArray anziché al suo valore non imballato.

2. Utilizza un array di oggetti con una proprietà contenente observableArray come:

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

Quindi, legatevi contro items piuttosto che $data.