2013-12-09 15 views
6

Ho un modello di eliminazione diretta:Jquery knockout: Render modello in-memory

<script id="draggableHelper" type="text/x-jquery-tmpl"> 
    <div class="draggableHelper"> 
     <span data-bind="text: Name"></span> 
    </div> 
</script> 

è possibile generare il risultato del template, e salvarlo nella memoria, inviando l'oggetto per popolare il modello?

Qualcosa di simile:

var result = ko.renderTemplate($("#draggableHelper").html(), { Name: "Test" }); 
+0

Ne dubito perché Knockout non è un motore di modelli. In nessun momento costruisce "la stringa HTML" di qualcosa. Potresti 'subscribe()' a un osservabile e prendi il 'innerHTML' dal nodo appropriato. – Tomalak

+0

"Il modello nativo è il meccanismo che sottostà a foreach, if, with e altri binding del flusso di controllo. Internamente, questi binding del flusso di controllo acquisiscono il markup HTML contenuto nel tuo elemento e lo usano come modello per eseguire il rendering su un elemento di dati arbitrario. Questa funzione è incorporata in Knockout e non richiede alcuna libreria esterna "- http://knockoutjs.com/documentation/template-binding.html – Dimitri

risposta

14

Sì, è possibile applicare attacchi ai nodi distaccato al DOM. Basta usare la funzione molto utile ko.applyBindingsToNode per ottenere il risultato desiderato.

ko.renderTemplateX = function(name, data){ 
    // create temporary container for rendered html 
    var temp = $("<div>"); 
    // apply "template" binding to div with specified data 
    ko.applyBindingsToNode(temp[0], { template: { name: name, data: data } }); 
    // save inner html of temporary div 
    var html = temp.html(); 
    // cleanup temporary node and return the result 
    temp.remove(); 
    return html; 
}; 

Date un'occhiata a questo piccolo esempio: http://jsfiddle.net/6s4gq/

Aggiornamento:

In origine era il metodo ko.renderTemplate ma c'è metodo incorporato in Knockout con lo stesso nome. L'override di ko.renderTemplate potrebbe interrompere il funzionamento dell'applicazione, soprattutto se si utilizza l'associazione template. Stai attento!

+2

ATTENZIONE:' ko.renderTemplate' è già definito in knockout. Questo codice diabolico mi ha fatto sbattere la testa contro il muro per due giorni consecutivi cercando di scoprire perché tutti i miei modelli "non in memoria" causano errori di "spazio in pila". Cambia il suo nome per favore! –

+1

@DaviFiamenghi, non posso esprimere quanto mi dispiace per il tuo tempo speso un po '! Ho aggiornato la mia risposta. Grazie! –

+1

Haha grazie per la tua misericordia, signore. E mi dispiace per il dramma, ero un po 'seccato al momento della risposta –

0

La risposta di f_martinez è davvero vicina a ciò di cui avevo bisogno, ho solo dovuto specificare il motore di template per farlo funzionare. La mia funzione:

var renderTemplate = function (name, data) { 
    // create temporary container for rendered html 
    var temp = $("<div>"); 

    // apply "template" binding to div with specified data 
    var options = { 
     template: { 
      name: name, 
      data: data, 
      templateEngine: new ko.nativeTemplateEngine() 
     } 
    }; 

    ko.applyBindingsToNode(temp[0], options); 

    // save inner html of temporary div 
    var html = temp.html(); 

    // cleanup temporary node and return the result 
    temp.remove(); 

    return html; 
};