Невозможно перетаскивать элементы из одного сортируемого в другой в рамках foreach.
-
21-12-2019 - |
Вопрос
Я использую Knockout/jquery-ui/knockout-sortable.
Я хочу перетаскивать элементы из одного сортируемого в другой.Видеть этот планкр например.Попробуйте перетащить один элемент из первой строки во вторую.Базовые наблюдаемые массивы обновляются, но пользовательский интерфейс является непоследовательным.Похоже, перетаскивание отменяется, и Knockout не обновляет пользовательский интерфейс должным образом.
Он отлично работает, когда сортируемые объекты указываются вручную, но перестает работать, когда я создаю их внутри привязки foreach.Кто-нибудь знает, что я делаю неправильно?
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);
});
Разметка:
<div id="rows" data-bind="foreach: allItems">
<ul class="row" data-bind="sortable: $data">
<li data-bind="text: $data"></li>
</ul>
</div>
Решение
А sortable
Плагин предполагает иметь дело с observableArray.В вашем случае, исходя из того, что foreach
работает, $data
фактически разворачивается в базовый массив.
Два способа исправить это:
Использовать
$rawData
вместо$data
(http://knockoutjs.com/documentation/binding-context.html) вsortable
привязка для привязки к observableArray, а не к его развернутому значению.Используйте массив объектов со свойством, содержащим observableArray, например:
viewModel.allItems = ko.observableArray([ { items: viewModel.firstItems }, { items: viewModel.secondItems }, { items: viewModel.thirdItems } ]);
Затем привяжите против items
скорее, чем $data
.