meteor - 删除流星 0.8.0 中插入的模板

Question

我正在使用 UI.render() 和 UI.insert() 插入模板。

当我试图删除我插入的模板时，它似乎留在内存中并且没有调用被破坏的方法。

根据文档，如果我使用 jquery 删除元素，它应该清理属性。

我正在使用以下代码对其进行测试：

测试.html：

<head>
  <title>removeTest</title>
    <style>
        #content {
            height: 500px;
            width: 500px;
            background-color: gray;
        }
    </style>
</head>    

<body><div id="content"></div></body>    

<template name="foo"><div id="{{id}}">Foo</div></template>

测试.js：

if (Meteor.isClient) {
    UI.body.events({
        "click": function(event) {
            var instance = UI.renderWithData(Template.foo, { });
            UI.insert(instance, $("#content")[0]);
        }
    });    

    Template.foo.created = function() {
        this.data.id = "handle";
        var self = this;
        this.x = setInterval(function() { console.log("running...") }, 1000);
        setTimeout(function() { $("#handle").remove() }, 1000);
    };    

    Template.foo.destroyed = function() {
        // never called.
        clearTimeout(this.x);
    };
}

我做错什么了？

谢谢。

score 5 · Accepted Answer

删除插入模板的一些选项：

a) 在您的模板中使用关闭事件。

Template.foo.events({
  'click a.close' : function(e, t) {
    e.preventDefault();

    t.__component__.dom.remove();
    return false;
  }
});

b) 使用助手和实例引用

Template.foo.helpers({
  destroy: function() {
    this.dom.remove();
  }
});

var instance = UI.renderWithData(Template.foo, { });
UI.insert(instance, $("#content")[0]);
instance.destroy();

score 2 · Accepted Answer

这目前是 Meteor 中的一个错误，正在以下相关的 GitHub 问题中进行跟踪：

当Blaze 的更新发布时，它应该被修复。

score 1 · Accepted Answer

根据 Avital 在 4 月 19 日的说法，代码正在被重写（来源）。

同时，如果您查看节点元素的属性$("#handle")[0]，您会发现有一个$ui对应于DomRange对象（代码）的调用。如果您调用remove该DomRange对象，您的destroyed回调将触发。事实上，它也会触发任何嵌套模板的回调。

$("#handle")[0].$ui.remove()

score 1 · Accepted Answer

我正在使用流星 1.0.3.2，因此在提出问题时该解决方案可能不可用。Blaze 实际上提供了一个remove方法来移除之前渲染的模板视图并调用destroyed回调。

您的代码如下所示：

Template.foo.rendered = function() {
  var self = this;
  this.x = setInterval(function() { console.log("running...") }, 1000);
  setTimeout((function() {
    UI.remove(self.view);
  }), 1000);
};

Template.foo.destroyed = function() {
  return clearTimeout(this.x);
};

请注意，您可能希望使用created回调而不是rendered回调。这是因为remove期望已经在 DOM 中呈现的视图。您可以在此处阅读有关这两个回调之间区别的更多信息：http: //meteor.github.io/blaze/docs.html#template_rendered

有关 Blaze 为您提供的 UI 功能的更多信息，请参阅此处http://docs.meteor.com/#/full/blaze_remove。

score 0 · Accepted Answer

我最近也遇到了这个问题。在 Meteor 提供补丁之前，现在的修复方法是将删除功能更改为：

setTimeout(function() { 
  $("#handle").remove() 
  self.__component__.isRemoved = true;
}, 1000);

至于 clearTimeout ......我们将不得不等待我认为的补丁

meteor - 删除流星 0.8.0 中插入的模板

5 回答 5

Related

Reference