Невозможно перетаскивать элементы из одного сортируемого в другой в рамках foreach.

Question

Я использую 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>

Answer 1

А sortable Плагин предполагает иметь дело с observableArray.В вашем случае, исходя из того, что foreach работает, $data фактически разворачивается в базовый массив.

Два способа исправить это:

1. Использовать $rawData вместо $data (http://knockoutjs.com/documentation/binding-context.html) в sortable привязка для привязки к observableArray, а не к его развернутому значению.

2. Используйте массив объектов со свойством, содержащим observableArray, например:

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

Затем привяжите против items скорее, чем $data.