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，然后您想要加入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保存在集合的文档中。

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

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

1 个答案: