Come eseguire una richiamata quando Mustache.js ha terminato il modello di rendering

Question

Esiste un modo pulito per definire/eseguire una funzione di richiamata una volta che Mustache.js ha finito il rendering di un modello e l'inserimento nel DOM? Per esempio, qualcosa di simile:

Mustache.render(template, viewModel, function() {...}); 

Il meglio che ho potuto venire in mente è il conteggio del numero di nodi nel mio modello vista che verranno inseriti nel DOM, e quindi utilizzando setInterval per verificare se che esistono molti nodi nel DOM. Una volta che lo fanno, posso quindi chiamare la funzione che voglio. Questo mi sembra inefficiente e potenzialmente buggy, ma non so cos'altro fare.

Answer 1

Se si utilizza anche jQuery è possibile utilizzare:

$("#element").ready(function() { 
    // do something when Mustache.js has finished rendering 
}); 

Mustache.js ha la capacità di trasmettere i risultati dei modelli. Questo è stato descritto nella documentazione del progetto ma era removed recently. Non sono sicuro che fosse intenzionale ma sembra funzionare ancora. Descrive un parametro di callback facoltativo della funzione Mustache.to_html che viene chiamata ogni volta che viene eseguito il rendering di un blocco del modello. Forse questo può aiutare con il tuo problema.

Answer 2

Non correlato ai baffi, in realtà si tratta di jQuery .html().

$ ('your_div') html (resa) .promise() done (function() {

// do your stuff 

})..;

Answer 3

non è necessario un callback per la funzione render() di mustache.js perché è sincrono. jquery's .html() è sincrono.

se si ha realmente bisogno di un callback (per qualsiasi motivo) è possibile codificare da soli:

var myrender = function(template, viewModel, callback) 
{ 
    Mustache.render(template, viewModel); 
    if(typeof callback === "function") 
     callback(); 
} 

// usage: 
myrender(my_template, my_viewModel, function(){ 
    alert("I can do anything here!"); 
}); 

Answer 4

Si può usare qualcosa di simile:

displayData: function() { 
    app.renderTemplate("test", app.data, function (returnValue) { 
     $('.result').append(returnValue); 
    }); 

}, 


renderTemplate: function (templatefile, data, callback) { 
    var tpl = 'views/' + templatefile + '.mst'; 
    $.ajax(tpl, 
     { 
      dataType: "text", 
      success: function (template) { 
       var rendered = Mustache.render(template, data); 
       callback(rendered); 
      } 
     }); 
} 

Il dettagliato how-to può essere trovato qui:.. https://www.chaensel.de/mustache-js-return-rendered-result-to-callback-function/