用Meteor保存jQueryUI可排序列表顺序的最佳方法 [英] Optimal way to save order of jQueryUI sortable list with Meteor

问题描述

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

I need some guidance/suggestions for an optimal way to save the order of a sortable list that takes advantage of Meteor.

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

The following is a scaled down version of what I'm trying to do. The application is a simple todo list. The end goal for the user is to sort their list where the data is picked up from the database. As the user sorts tasks, I would like to save the order of the tasks.

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

I've implemented this application without Meteor using php/ajax calls using sortable's update event that would delete the entry in the database and replace it with what was currently in the DOM. I'm curious to know if there are a better ways to do this taking advantage of Meteor's capabilities.

以下示例代码直接来自实时演示.

The following sample code is straight off of 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.):

JS(Without the Meteor.isServer that simply populates the database.):

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({})的输出):

Sample data (Output of Tasks.find({})):

[{
   title:"CSC209",
   description:"Assignment 3"
 },
 {
   title:"Laundry",
   description:"Whites"
 },
 {
   title:"Clean",
   description:"Bathroom"
 }]

推荐答案

您可能想先对您的邮件进行排序项添加到收藏夹上的新字段中，那么您就需要加入 jQuery可排序的update事件:

You'd probably want to first sort your items by a new field on you collection then, you'll want to hook into the 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();
     };
}

您的模板看起来像这样:

You template would look a bit like this:

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

And when that event is triggered, it would determine the order of the list and save the new order in the documents for the collection.

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

This isn't really a complete answer, but hopefully it helps a bit.

这篇关于用Meteor保存jQueryUI可排序列表顺序的最佳方法的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！