유티를 사용하여 jQueryUI 정렬 가능 목록의 순서를 저장하는 최적의 방법

Question

유성을 활용하는 정렬 가능한 목록의 순서를 저장하는 최적의 방법에 대한 지침이나 제안이 필요합니다.

다음은 내가하려는 일의 축소판입니다. 응용 프로그램은 간단한 todo 목록입니다. 사용자의 최종 목표는 데이터가 데이터베이스에서 선택되는 목록을 정렬하는 것입니다. 사용자가 작업을 정렬 할 때 작업 순서를 저장하려고합니다.

sortable's update event을 사용하는 php/ajax 호출을 사용하여 Meteor없이이 응용 프로그램을 구현했습니다.이 응용 프로그램은 데이터베이스의 항목을 삭제하고 현재 DOM에 있던 내용으로 대체합니다. Meteor의 역량을 이용하여이를 수행하는 더 좋은 방법이 있는지 궁금합니다.

다음 샘플 코드는 바로 a live demo입니다.

HTML (단순히 데이터베이스를 채우는 Meteor.isServer 없음.)

<template name="todo_list"> 
    <div class="todo_list sortable"> 
     {{#each task}} 
      <div class="task"> 
       <h1>{{title}}</h1> 
       {{description}} 
      </div> 
     {{/each}} 
    </div> 
</template> 

JS :

if (Meteor.isClient) { 
    //Populate the template 
    Template.todo_list.task = function() { 
     return Tasks.find({}); 
    }; 

    //Add sortable functionality 
    Template.todo_list.rendered = function() { 
     $(".sortable").sortable(); 
     $(".sortable").disableSelection(); 
    }; 
} 

샘플 데이터 (Tasks.find 출력 ({}))

Answer 1

아마도 새 필드를 통해 sort your items에 먼저 컬렉션을 추가하고 싶을 것입니다. jQuery sortable update event :

이

if (Meteor.isClient) { 
    // Populate the template 
    Template.todo_list.task = function() { 
     return Tasks.find({}, { sort: ['order'] }); 
    }; 

    // Add sortable functionality 
    Template.todo_list.rendered = function() { 
     $('.sortable').sortable({ 
      update: function (event, ui) { 
       // save your new list order based on the `data-id`. 
       // when you save the items, make sure it updates their 
       // order based on their index in the list. 
       some_magic_ordering_function() 
      } 
     }); 
     $(".sortable").disableSelection(); 
    }; 
} 

당신의 템플릿이 같은 비트 보일 것이다

<template name="todo_list"> 
    <div class="todo_list sortable"> 
     {{#each task}} 
      <div class="task" data-id="{{_id}}"> 
       <h1>{{title}}</h1> 
       {{description}} 
      </div> 
     {{/each}} 
    </div> 
</template> 

을 그리고 그 이벤트가 트리거 될 때,이 목록의 순서를 결정하기위한 문서에 새 order을 절약 할 수 컬렉션.

이것은 실제로 완전한 대답은 아니지만 잘하면 조금 도움이됩니다.