Question

我使用UI.render（）和UI.insert（）插入模板。

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

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

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

的test.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>

test.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);
    };
}

我做错了什么？

感谢。

Answer 1

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

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();

Answer 2

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

释放updates to Blaze时应该修复。

Answer 3

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

与此同时，如果您查看节点元素$("#handle")[0]的属性，您会看到有一个名为$ui的对应DomRange对象的对象（{ {3}}）。如果您在remove对象上致电DomRange，则会触发destroyed回调。实际上，它也将触发任何嵌套模板的回调。

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

Answer 4

我正在使用meteor 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。

Answer 5

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

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

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

在流星0.8.0中删除插入的模板

5 个答案: