私のUIが更新されないのはなぜですか？

Question

私はユーザーの入力をadd itemsにしようとすると：

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

私が起こっているのかを確認するためのdebugger;ステートメントを追加しようとしましたが、それはプロセッサが持つ示しているが、それは、そこに壊すソースコードが表示されません停止。

それはまた、次のエラーを示しておく：

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

私は私の入力を囲むフォーム要素を取り除いたとしても。

Answer 1

あなたは正しくbinding click eventsではありません。

それは次のようになります。

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

removeボタンも次のように変更します。remove関数はまだ動作しません

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

。

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

ここにはupdated fiddleがあります。同じ行に沿って他のボタンを変更する必要があります。