meteor.js ToDo 应用程序中的拖放重新排序功能

Question

对象：-

在流星 ToDo 示例应用中添加拖放功能。

为什么：-

经历学习曲线。

我能想到的：-

使用 jquery UI（作为外部 js）并将更新事件绑定到待办事项列表。在 li 项上有一个数据字段，以便从同一个函数本身执行更新命令。

想知道是否存在更接近流星的方法..

谢谢！

Answer 1

Meteor 的模板引擎 (Spark) 会在对基础数据进行任何更改时重新绘制您的 TODO 列表，我预计这会扰乱 JQuery UI 的正常操作。

考虑为您的 JQuery UI 托管区域使用 constant。

Answer 2

来自this 的回答和上面劳埃德的回答，这里是解决方法：

<template name="todos">
...code...
  {{#constant}}
  {{sort_code}}
  {{/constant}}
</template>

--

<div class="todo-text" data-id="{{_id}}">{{text}}</div>

在 todo.js 中

Template.todos.sort_code = function(){
Meteor.defer(function(){
$('#item-list').sortable({
  update: function(e,iq){
    $('div.todo-text',this).each(function(i){
            var id = $(this).attr('data-id');
            Todos.update(id, {$set:{order:i+1}});
  });
  },
});
$( "#item-list" ).disableSelection();
console.log('dd');

});
};