javascript - #Meteor模板中的每个 block 在元素移动后复制元素

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，允许用户在此列表中拖放。当用户移动完项目并且 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>) 的东西从模板中生成项目)。

希望对您有所帮助!