Meteor模板中的#each块在移动元素后复制元素

Question

我有一个模板可以迭代一个集合：

<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 sortable，允许用户在此列表中拖放。当用户完成移动项目并且DOM完成渲染时，我会更新此模板使用的集合。

当用户向下拖动项目时，此功能正常，但是当项目被拖动时，Meteor会复制刚刚拖动的项目。

提前感谢您的帮助。

Answer 1

这里的问题是你告诉Meteor和jQuery管理相同的DOM元素。他们都试图更新元素，他们最终战斗:)这就像开车......只有一个人可以一次开车。

你有两个选择：

• 让Meteor管理元素。在这种情况下，你需要找到一种方法来告诉另一个库（在这种情况下是jQuery）实际上没有物理移动DOM中的元素..只是让它给你一个回调并让你知道用户想做什么。然后更新集合，Meteor更新屏幕。

• 让jQuery管理元素。将页面的整个部分放在{{#constant}}..{{/constant}}内，Meteor将不管它。您可以调用<collectionname>.find(<query>).observe({...})并使用jQuery创建/移动/删除列表项以响应observe给您的回调。 （您仍然可以使用Meteor.render使每个单独的项目具有反应性，如果需要，您甚至可以使用Meteor.render(Template.<mytemplate>)之类的内容生成模板中的项目。

希望有所帮助！

Answer 2

这是一个疯狂的猜测，没有看到JS：

Meteor看到元素列表与它用于each语句的对象列表不匹配，因此它添加了它认为缺少的对象列表。

我会尝试在拖动结束时获得回调，然后在该回调中确保Meteor知道元素应该显示在哪个顺序中，以便在重新呈现each块时，它不会混淆元素的正确顺序并覆盖它。

希望这是正确的轨道！使得面向回调的代码与Meteor的反应性结合起来可能很棘手。