4

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

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

我已经在没有 Meteor 的情况下使用 php/ajax 调用使用sortable 的 update 事件实现了这个应用程序，该事件将删除数据库中的条目并将其替换为当前在 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"
 }]
4

1 回答 1

5

您可能希望首先通过集合上的新字段对项目进行排序，然后，您需要挂钩到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在集合的文档中。

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

于 2012-12-17T00:46:39.040 回答