Separa il modello di visualizzazione dalla vista in knockout

Sto cercando funzionalità unbind in knockout. Purtroppo googling e guardando attraverso le domande poste qui non mi ha dato alcuna informazione utile sull'argomento.Separa il modello di visualizzazione dalla vista in knockout

Fornirò un esempio per illustrare che tipo di funzionalità è richiesta.

Diciamo che ho un modulo con diversi input. Inoltre ho un modello di vista abbinato a questo modulo. Per qualche ragione come reazione all'azione dell'utente ho bisogno di dissipare il mio modello di vista dal modulo, cioè poiché l'azione è stata eseguita voglio che tutti i miei osservabili smettano di reagire ai cambiamenti dei valori corrispondenti e viceversa. influenzare i valori degli input.

Qual è il modo migliore per raggiungere questo obiettivo?

fonte

2012-06-14 ILya

È possibile utilizzare ko.cleanNode per rimuovere le associazioni. È possibile applicarlo a specifici elementi DOM o contenitori DOM di livello superiore (ad esempio l'intero modulo).

Vedere http://jsfiddle.net/KRyXR/157/ per un esempio.

fonte

2012-06-14 12:52:21

brillante! Grazie! – ILya

la prossima volta scrivere getElementById e non $ ("# theid") [0] è ancora meglio usare JavaScript e non jQuery per tutto –

+18

Per i progetti in cui sto usando jquery, sono generalmente felice di rinunciare a 1,5 ms per evitare digitando un extra di 15 caratteri. Penso che resterò con i selettori jQuery quando ne avrò l'opportunità. – Donamite

@Mark La risposta di Robinson è corretta.

Tuttavia, utilizzando la risposta di Mark ho fatto quanto segue, che potrebbe essere utile.

// get the DOM element 
    var element = $('div.searchRestults')[0]; 
    //call clean node, kind of unbind 
    ko.cleanNode(element); 
    //apply the binding again 
    ko.applyBindings(searchResultViewModel, element);

fonte

2013-02-11 09:42:58

+1 per ko.cleanNode (elemento) – lamarant

Ho dovuto usare questo dopo aver disabilitato/abilitato manualmente gli elementi del modulo per ripristinare l'automaticità delle associazioni 'enable' di knockout. – casey

<html> 
 
    <head> 
 
     <script type="text/javascript" src="jquery-1.11.3.js"></script> 
 
     <script type="text/javascript" src="knockout-2.2.1.js"></script> 
 
     <script type="text/javascript" src="knockout-2.2.1.debug.js"></script> 
 
     <script type="text/javascript" src="clickHandler.js"></script> 
 
    </head> 
 
    <body> 
 
     <div class="modelBody"> 
 
      <div class = 'modelData'> 
 
       <span class="nameField" data-bind="text: name"></span> 
 
       <span class="idField" data-bind="text: id"></span> 
 
       <span class="lengthField" data-bind="text: length"></span> 
 
      </div> 
 
      <button type='button' class="modelData1" data-bind="click:showModelData.bind($data, 'model1')">show Model Data1</button> 
 
      <button type='button' class="modelData2" data-bind="click:showModelData.bind($data, 'model2')">show Model Data2</button> 
 
      <button type='button' class="modelData3" data-bind="click:showModelData.bind($data, 'model3')">show Model Data3</button> 
 
     </div> 
 
    </body> 
 
</html>

@ Mark Robinson ha dato soluzione perfetta, non ho problema simile con singolo elemento DOM e l'aggiornamento dei diversi modelli vista su questo singolo elemento dom.

Ogni modello di vista ha un evento click, quando si verifica un clic ogni volta che viene richiamato il metodo di clic di ciascun modello di vista che ha provocato l'esecuzione di blocchi di codice non necessari durante l'evento click.

Ho seguito l'approccio @Mark Robinson per pulire il nodo prima di applicare i binding attuali, ha funzionato davvero bene. Grazie Robin. Il mio codice di esempio va così.

function viewModel(name, id, length){ 
 
\t \t var self = this; 
 
\t \t self.name = name; 
 
\t \t self.id = id; 
 
\t \t self.length = length; 
 
\t } 
 
\t viewModel.prototype = { 
 
\t \t showModelData: function(data){ 
 
\t \t console.log('selected model is ' + data); 
 
\t \t if(data=='model1'){ 
 
\t \t \t ko.cleanNode(button1[0]); 
 
\t \t \t ko.applyBindings(viewModel1, button1[0]); 
 
\t \t \t console.log(viewModel1); 
 
\t \t } 
 
\t \t else if(data=='model2'){ 
 
\t \t ko.cleanNode(button1[0]); 
 
\t \t \t ko.applyBindings(viewModel3, button1[0]); 
 
\t \t \t console.log(viewModel2); 
 
\t \t } 
 
\t \t else if(data=='model3'){ 
 
\t \t ko.cleanNode(button1[0]); 
 
\t \t \t ko.applyBindings(viewModel3, button1[0]); 
 
\t \t \t console.log(viewModel3); 
 
\t \t } 
 
\t } 
 
\t } 
 
\t $(document).ready(function(){ 
 
\t \t button1 = $(".modelBody"); 
 
\t \t viewModel1 = new viewModel('TextField', '111', 32); 
 
\t \t viewModel2 = new viewModel('FloatField', '222', 64); 
 
\t \t viewModel3 = new viewModel('LongIntField', '333', 108); 
 
\t \t ko.applyBindings(viewModel1, button1[0]); 
 
\t }); 
 
\t

fonte

2016-10-20 06:07:01

Separa il modello di visualizzazione dalla vista in knockout

risposta

Problemi correlati