Warum wird mein UI nicht aktualisiert?

Question

Wenn ich versuche zu add items für Benutzereingaben:

// Here's my data model 
var ViewModel = function() { 
    var self = this; 
    self.concentration = ko.observable(); 
    self.calibrations = ko.observableArray(); 
    self.sampleMeasure = ko.observable(); 

    self.add = function() { 
    debugger; 
     self.calibrations.push({ 
      x: undefined, 
      yT: undefined, 
      yM: undefined 
     }); 
    }; 

    self.remove = function() { 
     self.calibrations.remove(this); 
    }; 

    self.testing = function() { 
     var data = [ 
      { x: 2, yT: 5.5, yM: 5.3 }, 
      { x: 6, yT: 13.5, yM: 13.2 }, 
      { x: 8, yT: 17.5, yM: 17.2 }, 
      { x: 10, yT: 21.5, yM: 21.6 }, 
      { x: 14, yT: 29.5, yM: 29.3 }, 
      { x: 19, yT: 39.5, yM: 39.6 } 
     ]; 

     ko.utils.arrayPushAll(data, self.calibrations); 

     self.calculateSampleConcentration(); 
    }; 

    self.calculateSampleConcentration = function() { 
    debugger; 
     self.concentration = 5; 
    }; 

    self.testing(); 
}; 

ko.applyBindings(new ViewModel()); // This makes Knockout get to work 

Ich habe debugger; Anweisungen hinzufügen versucht, um zu sehen, was passiert, aber es zeigt nicht den Quellcode dort brechen, obwohl es der Prozessor zeigen, hat gestoppt.

halten sie zeigt auch die folgende Fehlermeldung:

{"error": "Please use POST request"} 

Auch wenn ich das Formular Element umgibt meine Eingaben entfernt.

Answer 1

Sie sind nicht binding click events richtig:

<button data-bind="click: add">Add Calibration</button> 

Die remove Taste sollte auch geändert werden:

Es sollte

<button data-bind="click: $parent.remove">Remove</button> 

Die Funktion remove immer noch nicht funktionieren. Es sollte geändert werden:

self.remove = function(item) { 
    // "item" argument will have the current calibration item being removed 
    self.calibrations.remove(item); 
}; 

Hier ist eine updated fiddle. Sie müssen andere Schaltflächen in den gleichen Zeilen ändern.