最佳方式保存与流星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中的文件集合。

这不是一个完整的答案，但希望它有一点帮助。