knockout.js: aggiorna i collegamenti?

Question

quando inserisco nuovi elementi nel DOM dopo ko.applyBindings(); è stato chiamato, quindi knockout non riconoscerà questi nuovi elementi. Posso capire perché questo sta accadendo - non sono semplicemente indicizzati per knockout.

Quindi, all'inizio pensavo che questo sarebbe stato risolto semplicemente chiamando di nuovo ko.applyBindings(), dopo aver aggiunto i miei nuovi elementi, MA poi mi sono reso conto che per ogni ko.applyBindings() chiamata che fai, gli eventi secondo ottengono licenziato più volte. Quindi, dopo aver applicato cinque volte, un clic: il binding verrà licenziato cinque volte, quindi questa non è una soluzione desiderabile;)

C'è qualcosa come ko.updateBindings() o qualcos'altro, per dirlo a knockout, beh .. aggiorna i collegamenti degli elementi?

saluti, Chris

Answer 1

Ogni volta che si richiama ko.applyBindings l'intera DOM è ispezionato per attacchi. Di conseguenza otterrai più associazioni per ciascun elemento se lo fai più di una volta. Se si desidera solo per associare un nuovo elemento DOM è possibile passare questo elemento come un parametro alla funzione applyBindings:

ko.applyBindings(viewModelA, document.getElementById("newElement")); 

Vai a questa domanda relativa:

Can you call ko.applyBindings to bind a partial view?

Answer 2

Senza sapere che cosa sei fino a esattamente, sembra che tu stia andando nella direzione sbagliata. La tua vista dovrebbe essere guidata dal tuo modello di vista. Quindi non dovresti aggiungere direttamente elementi DOM a cui devi applicare i collegamenti a eliminazione diretta.

Invece dovresti aggiornare il tuo modello di vista per riflettere il cambiamento nella vista, che quindi fa apparire il tuo nuovo elemento.

Ad esempio, per il tuo $('body').append('<a href="#" data-bind="click: something">Click me!</a>');, anziché aggiungere l'elemento DOM quando il pulsante deve essere visibile, controlla la visibilità del pulsante utilizzando il modello di visualizzazione.

Così il vostro modello di vista include

var viewModel = { clickMeAvailable: ko.observable(false) } 

E il codice HTML include

<a href="#" data-bind="click: something, visible: clickMeAvailable">Click me!</a> 

quando cambia lo stato di applicazione in modo che il pulsante di click me è disponibile, è quindi solo viewModel.clickMeAvailable(true).

Il punto di questo e di gran parte del knockout è separare la logica aziendale dalla presentazione. Quindi il codice che rende cliccabile su di me non teme che il click me coinvolga un pulsante. Tutto ciò che fa è aggiornare viewModel.clickMeAvailable quando clicchi è disponibile.

Ad esempio, fare clic su di me è un pulsante Salva che dovrebbe essere disponibile quando un modulo viene compilato in modo valido. Collegherebbe la visibilità del pulsante di salvataggio a un modello di vista formValid osservabile.

Ma poi si decide di cambiare le cose quindi dopo che il modulo è valido, appare un accordo legale che deve essere consentito a prima di salvare. La logica del modulo non cambia, ma imposta lo formValid quando il modulo è valido. Dovresti solo cambiare ciò che accade quando si modificano le modifiche formValid.

Come lassombra sottolinea nei commenti su questa risposta, ci sono casi in cui la manipolazione diretta del DOM può essere il vostro approccio migliore - ad esempio una pagina dinamica complessa in cui si desidera solo idratare parti della vista quando sono necessarie. Ma stai abbandonando parte della separazione delle preoccupazioni che Knockout fornisce in questo modo. Stai attento se stai pensando di fare questo scambio.

Answer 3

So che l'hai chiesto molto tempo fa ma mi sono imbattuto in un problema simile. Ho provato ad aggiungere nuovi elementi al contenitore e dare loro una funzione onclick. All'inizio ho provato le cose che hai fatto, e ho anche provato l'approccio ColinErecommended. Questa non era una soluzione pratica per me, così ho provato SamStephens approccio e si avvicinò con quella, che workes perfettamente per me:

HTML:

<div id="workspace" data-bind="foreach:nodeArr, click:addNode"> 
<div class="node" data-bind="attr:{id:nodeID},style:{left:nodeX,top:nodeY},text:nodeID, click:$parent.changeColor"></div> 
</div> 

JavaScript:

<script> 
function ViewModel() { 
var self = this; 
var id = 0; 
self.nodeArr = ko.observableArray(); 
self.addNode = function (data, event) { 
    self.nodeArr.push({ 
     'nodeID': 'node' + id, 
     'nodeX' : (event.offsetX - 25) + 'px', 
     'nodeY' : (event.offsetY - 10) + 'px' 
    }) 
    id++; 
} 
self.changeColor = function(data, event){ 
    event.stopPropagation(); 
    event.target.style.color = 'green'; 
    event.target.style.backgroundColor = 'white'; 
} 
} 
ko.applyBindings(new ViewModel()); 
</script> 

Puoi giocare con esso nel JS Fiddle che ho fatto. Spero che questo aiuti ancora qualcuno.