meteor.js ToDo アプリのドラッグ アンド ドロップによる並べ替え機能

Question

オブジェクト:-

meteor ToDo サンプル アプリにドラッグ アンド ドロップ機能を追加するには。

なぜ：-

学習曲線を通過します。

私が考えられること:-

jquery UI (外部 js として) を使用し、更新イベントを todo リストにバインドします。同じ関数自体から更新コマンドを実行するために、li 項目にデータ フィールドがあります。

もっと流星的なアプローチが存在するのではないかと考えていました。

ありがとう！

Answer 1

答えとLloydの回答から上記の、ここに回避策があります：

<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');

});
};

.

Answer 2

Meteor のテンプレート エンジン (Spark) は、基になるデータに変更が加えられると TODO リストを再描画します。これにより、JQuery UI の通常の操作が台無しになることが予想されます。

使用を検討してください constant JQuery UI 管理領域用。