Impossibile trascinare e rilasciare elementi da un elemento ordinabile a un altro all'interno di un foreach
-
21-12-2019 - |
Domanda
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>
Soluzione
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:
Utilizzo
$rawData
invece di$data
(http://knockoutjs.com/documentation/binding-context.html) nelsortable
associazione per legarsi all'observableArray anziché al suo valore non imballato.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
.