foreach 내에서 정렬 가능한 항목을 다른 정렬 가능한 항목으로 끌어서 놓을 수 없습니다.

Question

나는 knockout/jquery-ui/knockout-sortable을 사용하고 있습니다.

정렬 가능한 항목을 다른 항목으로 드래그 앤 드롭하고 싶습니다.보다 이 plnkr 예를 들어.첫 번째 행의 항목 하나를 두 번째 행으로 드래그해 보세요.기본 관찰 가능 배열이 업데이트되지만 UI가 일관되지 않습니다.드래그 앤 드롭이 취소되고 Knockout이 UI를 제대로 업데이트하지 않는 것 같습니다.

정렬 가능 항목을 수동으로 지정하면 제대로 작동하지만 foreach 바인딩 내에서 정렬 가능 항목을 만들면 작동이 중지됩니다.내가 뭘 잘못하고 있는지 아는 사람 있나요?

자바스크립트:

  $(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/bind-context.html)에서 sortable 래핑되지 않은 값이 아닌 observableArray에 대해 바인딩하는 바인딩입니다.

2. 다음과 같이 observableArray를 포함하는 속성이 있는 객체 배열을 사용하세요.

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

그런 다음 바인딩 items 오히려 $data.