4

Meteorを利用するソート可能なリストの順序を保存するための最適な方法については、いくつかのガイダンス/提案が必要です。

以下は、私がやろうとしていることの縮小版です。アプリケーションは単純なToDoリストです。ユーザーの最終的な目標は、データベースからデータが取得されるリストを並べ替えることです。ユーザーがタスクを並べ替えるときに、タスクの順序を保存したいと思います。

私は、データベース内のエントリを削除し、現在DOMにあるものに置き換えるsortableの更新イベントを使用してphp / ajax呼び出しを使用して、Meteorなしでこのアプリケーションを実装しました。Meteorの機能を利用してこれを行うためのより良い方法があるかどうか知りたいです。

次のサンプルコードは、ライブデモから直接引用したものです。

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"
 }]
4

1 に答える 1

5

最初にコレクションの新しいフィールドでアイテムを並べ替えてから、 jQueryの並べ替え可能なupdateイベントにフックすることをお勧めします。

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れ、コレクションのドキュメントに新しいものが保存されます。

これは実際には完全な答えではありませんが、うまくいけば少し役立つでしょう。

于 2012-12-17T00:46:39.040 に答える