Não é possível arrastar e soltar itens de um classificável para outro dentro de um foreach
-
21-12-2019 - |
Pergunta
Estou usando knockout/jquery-ui/knockout-sortable.
Quero arrastar e soltar itens de um classificável para outro.Ver este plnkr por exemplo.Tente arrastar um item da primeira linha para a segunda linha.As matrizes observáveis subjacentes são atualizadas, mas a IU é inconsistente.Parece que arrastar e soltar está sendo cancelado e o Knockout não está atualizando a IU como deveria.
Funciona bem quando os classificáveis são especificados manualmente, mas para de funcionar quando eu os crio dentro de uma ligação foreach.Alguém sabe o que estou fazendo de errado?
O 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);
});
A marcação:
<div id="rows" data-bind="foreach: allItems">
<ul class="row" data-bind="sortable: $data">
<li data-bind="text: $data"></li>
</ul>
</div>
Solução
O sortable
plugin espera lidar com um observableArray.No seu caso, com base na forma como foreach
funciona, $data
na verdade, é desembrulhado na matriz subjacente.
Duas maneiras de consertar isso:
Usar
$rawData
em vez de$data
(http://knockoutjs.com/documentation/binding-context.html) nosortable
vinculação para vincular ao observableArray em vez de seu valor desembrulhado.Use um array de objetos com uma propriedade contendo o observableArray como:
viewModel.allItems = ko.observableArray([ { items: viewModel.firstItems }, { items: viewModel.secondItems }, { items: viewModel.thirdItems } ]);
Então, ligue-se contra items
em vez de $data
.