Odłącz model widoku od widoku w nokaucie

Szukam rozpinania funkcjonalności w nokaut. Niestety, szukanie w Google i przeglądanie zadawanych tutaj pytań nie dostarczyło mi żadnych użytecznych informacji na ten temat.Odłącz model widoku od widoku w nokaucie

Przedstawię przykład ilustrujący, jaki rodzaj funkcji jest wymagany.

Powiedzmy, że mam formularz z kilkoma wejściami. Mam również model widoku powiązanego z tym formularzem. Z jakiegoś powodu jako reakcja na działanie użytkownika muszę odzwiązać mój model widoku od formularza, tj. Od momentu wykonania czynności, chcę, aby wszystkie moje obserwacje przestały reagować na zmiany odpowiednich wartości i vice versa - wszelkie zmiany dokonane w obserwatorach shouldn wpływa na wartości wejść.

Jaki jest najlepszy sposób, aby to osiągnąć?

Źródło

2012-06-14 ILya

Możesz użyć ko.cleanNode, aby usunąć wiązania. Możesz zastosować to do określonych elementów DOM lub kontenerów DOM wyższego poziomu (np. Cały formularz).

Przykładem jest http://jsfiddle.net/KRyXR/157/.

Źródło

2012-06-14 12:52:21

genialny! Dziękuję Ci! – ILya

następnym razem napisz getElementById, a nie $ ("# theid") [0] jest jeszcze lepiej używać JavaScript, a nie jQuery do wszystkiego –

+18

W przypadku projektów, w których używam jquery, generalnie z przyjemnością rezygnuję z 1,5ms, aby uniknąć wpisując 15 dodatkowych znaków. Myślę, że będę trzymać się selektorów jquery, kiedy będę miał okazję. – Donamite

@ Odpowiedź Mark Robinson jest poprawna.

Mimo to za pomocą funkcji Znak odpowiedzi wykonałem następujące czynności, które mogą okazać się przydatne.

// 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);

Źródło

2013-02-11 09:42:58

+1 dla ko.cleanNode (element) – lamarant

Musiałem użyć tego po ręcznym dezaktywowaniu/włączeniu elementów formularza w celu przywrócenia automatycznych wiązań 'enable' nokautu. – 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 dał doskonałe rozwiązanie, mam podobny problem z pojedynczego elementu DOM i aktualizowania różnych modeli oglądać na tym jednym elemencie DOM.

Każdy model widoku ma wydarzenie typu "kliknięcie", po kliknięciu otrzymywana jest metoda każdego kliknięcia każdego modelu widoku, co spowodowało niepotrzebne wykonywanie bloków kodu podczas zdarzenia kliknięcia.

Zastosowałem metodę @Mark Robinson, aby oczyścić węzeł przed zastosowaniem moich rzeczywistych wiązań, to naprawdę działało dobrze. Dzięki Robin. Mój przykładowy kod wygląda następująco.

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

Źródło

2016-10-20 06:07:01

Odłącz model widoku od widoku w nokaucie

Odpowiedz

Powiązane problemy