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

Question

我需要一些指导/建议,以便以最佳方式保存利用Meteor的可排序列表的顺序.

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

我已经在没有Meteor的情况下使用php/ajax调用使用可排序的更新事件来实现此应用程序,该事件将删除数据库中的条目并将其替换为当前在DOM中的条目.我很想知道是否有更好的方法可以利用Meteor的功能.

以下示例代码直接来自现场演示.

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

您可能希望首先按照集合中的新字段对项目进行排序,然后,您将要挂钩到jQuery可排序update事件:

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在集合的文档中.

这不是一个完整的答案,但希望它有所帮助.