jquery-ui - 使用 Meteor 保存 jQueryUI 可排序列表顺序的最佳方法

Question

我需要一些指导/建议，以找到一种最佳方式来保存利用 Meteor 的可排序列表的顺序。

以下是我正在尝试做的事情的缩小版本。该应用程序是一个简单的待办事项列表。用户的最终目标是对从数据库中获取数据的列表进行排序。当用户对任务进行排序时，我想保存任务的顺序。

我已经使用 sortable's update event 使用 php/ajax 调用在没有 Meteor 的情况下实现了这个应用程序这将删除数据库中的条目并将其替换为 DOM 中当前的条目。我很想知道是否有更好的方法来利用 Meteor 的功能来做到这一点。

以下示例代码直接来自 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然后，通过集合上的新字段，您将需要 Hook 到 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>

当该事件被触发时，它将确定列表的顺序并将新的顺序保存在集合的文档中。

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