Ne pouvez pas faire glisser et déposer des éléments d'un sortable à l'autre dans un foreach

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>

Answer 1

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:

1. Utilisation $rawData au lieu de $data (http://knockoutjs.com/documentation/binding-context.html) dans le sortable de liaison pour lier contre la observableArray plutôt que son déballé valeur.

2. 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.