Problem with "Template.onDestroyed()" when close the "Alertify JS"?


#1

I open the Form with Alertify JS, and then I close the popup but onDestroyed don’t work.

<template name="...">
..............
</template>

...events({
   'click .btn': function(e, t){
      alertify(........., renderTemplate(............))
   }
})

....onDestroyed(function(){
   console.log('destroyed');
})

But don’ work when I close (x) the Alertify Js


#2

// listen to internal dialog events.
hooks:{
// triggered when the dialog is shown, this is seperate from user defined onshow
onshow: function(){
},
// triggered when the dialog is closed, this is seperate from user defined onclose
onclose: function(){
},
// triggered when a dialog option gets updated.
// IMPORTANT: This will not be triggered for dialog custom settings updates ( use settingUpdated instead).
onupdate: function(){
}
}


#3

for example I have custom alertiry like this:

alertify.custom('Custom Title', renderTemplate(Template.myTpl)).maximize();

Please help me to use hooks for this?


#4
alertify.custom('Custom Title', renderTemplate(Template.myTpl)).set({onclose:function(){console.log('close.')}}).maximize();

#5

Thanks again :smiley:


#6

I tried

alertify.custom('Custom Title', renderTemplate(Template.myTpl))
   .set({
      onclose: function(){
        Template.myTpl.onDestroyed(function(){
           console.log('Template is destroyed!');
        });
      }
   })
   .maximize();

But don’t work.


#7

Hi, renderTemplate return HTML, right? renderTemplate same same Blaze.toHTML?


#8

Excuse me, I would like to run onDestroyed when I close the Alertify.
Please help me.


#9

onDestroyed : Register a function to be called when an instance of this template is removed from the DOM and destroyed.

If renderTemplate(Template.myTpl) only return HTML, (your renderTemplate = Blaze.toHTML(Template.myTpl)), you can’t run onDestroyed when close the Alertify because onDestroyed have called after Blaze.toHTML return HTML.


#10

Thanks, Please recommend to solve.


#11

Hi, my stupid solution and untested…

//your layout :
<div id="container-tpl" style="display:none"></div>

function renderTemplate(tpl) {
    var instanceTpl = Blaze.render(tpl, $('#container-tpl')[0]),
        html = $('#container-tpl').html();
    return {
        instance: instanceTpl,
        html: html
    }
}
//your event

'click .btn': function(e, t) {
    var tmp = renderTemplate(Template.myTpl);
    alertify.custom('Custom Title', tmp.html)
        .set({
            onclose: function() {
                Blaze.remove(tmp.instance);
            }
        })
        .maximize();

}

// Template.myTpl.onDestroyed

#12

Very thank, I will try.
This is my renderTemplate before:

renderTemplate = function (template, data) {
    var node = document.createElement("div");
    document.body.appendChild(node);
    Blaze.renderWithData(template, data, node);
    return node;
};