Warum funktioniert meine Datenbindung an eine berechnete Funktion nicht (mit knockout.js und jade)?

Question

Ich verwende knockout.js in meinem copepen.io, mit Jade als mein Präprozessor.

Meine Bearbeitungsschaltflächen sollen den Wert in der ersten td in true ändern, und die Speicheränderungen sollen den Wert der ersten td wieder in false ändern. Warum funktioniert die Bindung nicht? Es bindet sich das erste Mal daran, hört aber nicht ständig auf Veränderungen zu. Warum ist es nicht? Die Funktion, die ich beim Klicken anrufe, ist eine berechnete Funktion, und die Variable, die ich ändern möchte, ist beobachtbar. Warum funktioniert es nicht ??

Heres ein Link zu meinem Code, der auf codepen ist

http://codepen.io/jkwest30/pen/bpYXYP

heres den Code als auch

Jade

.container 
    .users.col-md-11.col-xs-12.table-responsive 
table.col-xs-12 
    tr 
    th Name 
    th Username 
    th 

    tr 
    td 
     input.form-control(data-bind="value:edit()") 
    td 
     input.form-control(value="jkwest30@gmail.com") 
    td 
     button.btn.btn-info.col-xs-12(data-bind="click:editFunction()") Edit 
    tr 
    td 
     input.form-control(value="Jake") 
    td 
     input.form-control(value="jkwest30@gmail.com") 
    td 
     button.btn.btn-info.col-xs-12(data-bind="click:editFunction()") Edit 

button.save.btn.btn-success.col-xs-12.col-md-4.col-md-offset-4(data-bind="click:saveChanges()") Save All Changes 

Javascript

var viewModel = (function(){ 
    function viewModel(){ 
     var self = this; 
     this.name = ko.observable("knockout works!"); 
     this.edit = ko.observable(false); 
     this.editFunction = ko.computed(function(){ 
      self.edit(true); 
     }) 
     this.saveChanges = ko.computed(function(){ 
      self.edit(false); 
     }) 
    } 
    return viewModel; 
})() 

ko.applyBindings(new viewModel()) 

FYI wenn Sie nicht mit Jade vertraut sind, klicken Sie einfach auf die Schaltfläche "kompiliert anzeigen" direkt über dem Jade-Code.

Danke!

Answer 1

computed observables sind abhängig von einer oder mehreren anderen Observablen, und automatically wird aktualisiert, wenn sich eine dieser Abhängigkeiten ändert. Wenn Sie Ihre berechnete Funktion in normale Funktionen ändern, werden sie immer dann aufgerufen, wenn ein Klickereignis eintritt.
von Abgesehen davon, stellen Sie sicher, dass Ihr Modell so strukturieren, dass Sie Edit-Taste, um die entsprechende Zeile des Eingangs

this.editFunction = function(){ 
    console.log("editFunction"); 
    self.edit(true); 
} 
this.saveChanges = function(){ 
    console.log("saveChanges"); 
    self.edit(false); 
}