最佳方式保存與流星jQueryUI排序列表

Question

我需要一些指導/建議，以保存利用流星的可排序列表的順序。

下面是什麼，我試圖做一個縮小版本。該應用程序是一個簡單的待辦事項列表。用戶的最終目標是要排序的列表，數據從數據庫中撈起。隨着用戶排序任務，我想保存任務的順序。

我已經在沒有Meteor的情況下使用php/ajax調用使用sortable's update event來實現此應用程序，該應用程序將刪除數據庫中的條目並將其替換爲當前在DOM中的條目。我很好奇，想知道是否有更好的方法可以做到的流星的能力，這種趁勢。

以下示例代碼是直客的a live demo。

HTML：

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

JS（如果沒有簡單地填充數據庫的Meteor.isServer）：

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的輸出（{}））：

[{ 
    title:"CSC209", 
    description:"Assignment 3" 
}, 
{ 
    title:"Laundry", 
    description:"Whites" 
}, 
{ 
    title:"Clean", 
    description:"Bathroom" 
}] 

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中的文件集合。

這不是一個完整的答案，但希望它有一點幫助。