Question

我想在从DOM中删除元素时触发事件。

在我的一个模板中，只有在满足条件时才会显示一个复选框：

{{#if some.thing}}
    <input type="checkbox" class="checkbox">
{{/if}}

稍后此复选框将转换为Bootstrap Toggle组件。

它的作用是隐藏原始复选框并为文档添加一些标记。一切都好。

现在，如果我的集合发生更改并且之前已满足的条件现在评估为false，则会从DOM中删除该复选框。从Bootstrap Toggle创建的节点仍然存在。所以我想删除复选框时删除nde。

我认为我可以使用DOMNodeRemoved事件来解决这个问题但在那里遇到一些问题：

Template.myTemplate.events({
  "DOMNodeRemoved input.checkbox": function(el) {
    $(el.currentTarget).bootstrapToggle('destroy');
  }
});

事件触发，但当我调用bootstrapToggle('destroy')并且浏览器冻结时，它会以某种方式结束。此事件之前也会多次触发，这让我觉得这不是首先观察被删除节点的正确方法。

有没有更好的方法来监视已移除的元素并在删除事件之前触发它？

我知道我可以简单地从我的模板中调用一个帮助器，手动检查节点是否存在并使用jQuery删除节点。但是我想看看Meteor.events是否可以实现这一点。

Answer 1

如果将input（以及新的引导程序节点）放在子模板中，这应该＆＃34;只需要工作＆＃34;开箱即用。

<template name="parent">
  {{#if some.thing}}
    {{> child}}
  {{/if}}
</template>

<template name="child">
  <input type="checkbox">
  <!-- additional bootstrap nodes get instantiated in child -->
</template>

在上面，如果some.thing === false输入和新节点将由Meteor自动从DOM中删除。

＆＃34;除去＆＃34;流星中的事件

1 个答案: