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 元素。他们都试图更新元素，但他们最终打架了:)这就像开车一样..一次只能一个人开车。

你有两个选择：

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

  • 让 jQuery 管理元素。将页面的整个部分放入{{#constant}}..{{/constant}}其中，Meteor 将不理会它。您可以调用<collectionname>.find(<query>).observe({...})和使用 jQuery 来创建/移动/删除列表项，以响应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 回答