大佬教程收集整理的这篇文章主要介绍了jquery-ui – 使用Meteor保存jQueryUI可排序列表顺序的最佳方法，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
以下是我正在尝试做的缩小版本.该应用程序是一个简单的待办事项列表.用户的最终目标是对从数据库中获取数据的列表进行排序.当用户对任务进行排序时,我想保存任务的顺序.
我使用sortable’s update event实现了这个没有Meteor的应用程序使用PHP / ajax调用,这将删除数据库中的条目并将其替换为当前在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(); }; }
[{ title:"CSC209",description:"Assignment 3" },{ title:"Laundry",description:"Whites" },{ title:"Clean",description:"Bathroom" }]
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>
当触发该事件时,它将确定列表的顺序并将新订单保存在集合的文档中.
这不是一个完整的答案,但希望它有所帮助.
以上是大佬教程为你收集整理的jquery-ui – 使用Meteor保存jQueryUI可排序列表顺序的最佳方法全部内容，希望文章能够帮你解决jquery-ui – 使用Meteor保存jQueryUI可排序列表顺序的最佳方法所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。