2

コレクションを次のように反復処理するテンプレートがあります。

<template name="task_list">
    <form id="tasks">
        {{#each tasks}}     
            {{> task}}
        {{/each}}
    </form>
</template>

<template name="task">
    <label class="checkbox" id="label-{{_id}}">
        <input type="checkbox" id="{{_id}}" {{{completed}}} /> {{text}}
    </label>
</template>

これを jQuery でソート可能にして、ユーザーがこのリスト内でドラッグ アンド ドロップできるようにしました。ユーザーがアイテムの移動を完了し、DOM のレンダリングが完了したら、このテンプレートが使用するコレクションを更新します。

これは、ユーザーがアイテムを下にドラッグすると正常に機能しますが、アイテムが上にドラッグされると、Meteor はドラッグされたばかりのアイテムを複製します。

ここに画像の説明を入力

よろしくお願いします。

4

2 に答える 2

3

ここでの問題は、MeteorとjQueryの両方に同じDOM要素を管理するように指示したことです。彼らは両方とも要素を更新しようとします、そして彼らは戦うことになります:)それは車を運転するようなものです..一度に運転できるのは一人だけです。

2つのオプションがあります。

  • Meteorに要素を管理させます。その場合、他のライブラリ（この場合はjQuery）にDOM内の要素を実際に物理的に移動しないように指示する方法を見つける必要があります。コールバックを提供し、ユーザーが何をしたいのかを知らせてください。 。次に、コレクションを更新すると、Meteorが画面を更新します。

  • jQueryに要素を管理させます。ページのこのセクション全体を中に入れる{{#constant}}..{{/constant}}と、Meteorはそれをそのままにします。jQueryを呼び出し<collectionname>.find(<query>).observe({...})て使用し、コールバックに応じてリストアイテムを作成/移動/削除するのobserveはあなた次第です。（を使用して、個々のアイテムをリアクティブにすることができます。Meteor.renderまた、必要に応じて、のようなものを使用して、テンプレートからアイテムを生成することもできますMeteor.render(Template.<mytemplate>)）。

お役に立てば幸いです。

于 2012-12-14T02:41:43.790 に答える
2

JSを見ずに、これが大げさな推測です。

Meteorは、要素のリストがeachステートメントに使用しているオブジェクトのリストと一致しないことを確認しているため、欠落していると見なされるものを追加します。

ドラッグが終了したときにコールバックを取得してみます。そのコールバックで、Meteorが要素が表示される順序を認識していることを確認して、eachブロックを再レンダリングするときに混乱しないようにします。要素の順序を修正して上書きします。

それが正しい軌道に乗っていることを願っています！コールバック指向のコードをMeteorの反応性と組み合わせてうまく機能させるのは難しい場合があります。

于 2012-12-14T02:04:58.800 に答える