2017-05-24 4 views
0

Mit Knockout, Es ist ziemlich einfach eine Schleife mit einigen json data.Here ist die Schleife in der Ansicht zu füllen:Wie entferne ich meine Bindungen?

<div class="row" data-bind="foreach: VacationRequestNotes"> 
    <div class="col-lg-2"> 
     <span class="input-sm" style="white-space:nowrap;" data-bind="text: EmployeeName"></span> 
    </div> 
    <div class="col-lg-10"> 
     <span class="input-sm" data-bind="text: NoteText"></span> 
    </div> 
</div> 

Und dann das Skript:

function ViewNotes(vactionRequestId) { 
    $.getJSON("/VacationRequests/GetNotes", { VacationRequestId: vactionRequestId }, function (data) { 
     if (data != "error") { 
      ko.applyBindings({ 
       VacationRequestNotes: data 
      }); 
     } 
    }); 
} 

groß Dies funktioniert! Zumindest beim ersten Mal. Das zweite Mal, ich

Uncaught Error: You cannot apply bindings multiple times to the same element.

ich andere Threads hier gesehen habe, die sagen, dass ich die Bindungen entfernen müssen, aber ich habe eine harte Zeit, die Anwendung dieser Beispiele zu dem, was ich tue.

function ViewNotes(vactionRequestId) { 
    $.getJSON("/VacationRequests/GetNotes", { VacationRequestId: vactionRequestId }, function (data) { 
     if (data != "error") { 
      ko.applyBindings({ 
       VacationRequestNotes: data 
      }); 
      ko.cleanNode(??? WHAT DO I PUT HERE ???); 
     } 
    }); 
} 
+0

Haben Sie versucht, es vom anderen Ende aus anzufahren und Ihre Bindungen nicht innerhalb eines sich wiederholenden Codeblocks anzuwenden? Sie können sie einmal auf Dokument bereit anwenden und vorhandene Observables innerhalb des Ajax Callbacks aktualisieren. –

+0

Versuchen Sie, dies zu tun 'ko.cleanNode (document.getElementsByTagName (" Körper "));' – muhihsan

+0

@Jason Solake: ok - ja, ich dachte in die gleiche Richtung. Neu im KO-Modus. Versuchen herauszufinden, wie das geht. Wenn die Seite zum ersten Mal geladen wird, ist VacationRequestNotes gleich null. Erst wenn ein Benutzer auf die Schaltfläche "Notizen anzeigen" klickt, wird alles enthalten sein. Also, was binde ich an Dokument bereit? –

Antwort

0

Schließlich habe es funktioniert:

$(document).on('ready', 
     function() { 
      masterVM = new VacationRequestsViewModel(); 
      ko.applyBindings(masterVM); 
     }); 

    function VacationRequestsViewModel() { 
     var self = this; 
     self.VacationRequestNotes = ko.observableArray(); 

     self.ViewNotes = function (vactionRequestId) { 
      $.getJSON("/VacationRequests/GetNotes", { VacationRequestId: vactionRequestId }, function (data) { 
       if (data != "error") { 
        self.VacationRequestNotes(data) 
        $("#modalNotes").modal('show'); 
       } 
      }); 
     } 
    } 

Dann wird in der HTML, statt diesen Link:

<a href="" onclick="ViewNotes(3)">View Notes</a> 

Sie es einfach ändern:

<a href="" onclick="masterVM.ViewNotes(3)">View Notes</a> 
0
function ViewNotes() { 
     var self = this;  
     self.VacationRequestNotes = ko.observable(); 
     self.GetNotes = function(vactionRequestId) {   
     $.getJSON("/VacationRequests/GetNotes", { VacationRequestId: vactionRequestId }, function (data) { 
      if (data != "error") { 
       self.VacationRequestNotes(ko.mapping.fromJS(data)); //requires the ko mapping.   
       //In vanilla JS you can use the map function. 
      } 
     });  
    }  
} 

$(function() { 
    var vm = new ViewNotes(); 
    ko.applyBindings(vm); 
}); 
+0

Ok, danke dafür! Eine Frage: Wie wird GetNotes jemals ausgeführt? –

+0

vm.GetNotes (someParameter). Oder Sie können es an eine Schaltfläche oder einen Link binden. Ich kann dir dabei helfen. – Bruno

+0

nach ko.applyBindings (vm) – Bruno

Verwandte Themen