Ne pouvez pas faire glisser et déposer des éléments d'un sortable à l'autre dans un foreach
-
21-12-2019 - |
Question
Je suis à l'aide de knock-out/jquery-ui/knock-out-triables.
Je veux faire glisser et déposer des éléments d'un sortable à l'autre.Voir cette plnkr par exemple.Essayez de faire glisser un élément de la première ligne dans la deuxième rangée.Le sous-jacent observables les tableaux sont mis à jour, mais l'INTERFACE utilisateur est incohérent.Il semble comme le glisser-déposer est annulée et knock-out n'est pas la mise à jour de l'INTERFACE utilisateur comme il se doit.
Il fonctionne très bien lorsque le sortables sont spécifiés manuellement, mais il s'arrête de fonctionner lorsque je les créer à l'intérieur d'un foreach de liaison.Quelqu'un sait ce que je fais mal?
Le 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);
});
Le balisage:
<div id="rows" data-bind="foreach: allItems">
<ul class="row" data-bind="sortable: $data">
<li data-bind="text: $data"></li>
</ul>
</div>
La solution
L' sortable
le plugin s'attend à faire face à une observableArray.Dans votre cas, basées sur la façon dont foreach
œuvres, $data
est en fait déballé pour le sous-tableau.
Deux façons que vous pouvez résoudre le problème:
Utilisation
$rawData
au lieu de$data
(http://knockoutjs.com/documentation/binding-context.html) dans lesortable
de liaison pour lier contre la observableArray plutôt que son déballé valeur.Utiliser un tableau d'objets avec une propriété contenant la observableArray comme:
viewModel.allItems = ko.observableArray([ { items: viewModel.firstItems }, { items: viewModel.secondItems }, { items: viewModel.thirdItems } ]);
Puis, se lient contre items
plutôt que de $data
.