Remove inserted template in meteor 0.8.0

问题

I am inserting templates using UI.render() and UI.insert().

When I tried to remove the template I inserted, it seems to stay in memory and the destroyed method is not called.

According to the documentation, it should clean up property if I use jquery to remove the element.

I'm testing it using the following code:

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

What did I do wrong?

Thanks.

回答1:

Some options to remove inserted templates:

a) Using a close event in your template.

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

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

b) Using a helper, and instance reference

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

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

回答2:

This is currently a bug in Meteor and is being tracked in the following related GitHub issues:

https://github.com/meteor/meteor/issues/2079
https://github.com/meteor/meteor/issues/2128
https://github.com/meteor/meteor/issues/2145

It should be fixed when updates to Blaze are released.

回答3:

According to Avital back on April 19, the code is being rewritten (source).

In the meantime, if you take a look at the properties of your node element $("#handle")[0], you'll see you have one called $ui which corresponds to the DomRange object (code). If you call remove on the DomRange object, your destroyed callback will fire. In fact, it will fire the callbacks for any nested templates as well.

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

回答4:

I am on meteor 1.0.3.2, so it is possible this solution was not available at the time the question was asked. Blaze actually provides a remove method that removes a previously rendered template view and invokes the destroyedcallback.

Your code would look like this:

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

Note that you probably want to use the created callback instead of the rendered callback. This is because remove expects a view already rendered in the DOM. You can read more about the the difference between those two callbacks here: http://meteor.github.io/blaze/docs.html#template_rendered

And for more reading on the UI functionality that Blaze gives you, refer here http://docs.meteor.com/#/full/blaze_remove.

回答5:

I ran into this problem recently as well. A fix right now until Meteor supplies a patch, would be to change the removal function to:

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

As for the clearTimeout... we'll have to wait for the patch I think

来源：https://stackoverflow.com/questions/22907716/remove-inserted-template-in-meteor-0-8-0

标签

meteor

meteor-blaze