Why is my ui not updating?

Question

When I try to add items for user input:

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

I've tried to add debugger; statements for to see what's happening, but it doesn't show the source code breaking there, although it show the processor has stopped.

It also keep showing the following error:

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

Even though I removed the form element surrounding my inputs.

Answer 1

You are not binding click events properly:

It should be:

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

The remove button should also be changed to:

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

The remove function still won't work. It should be changed to:

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

Here's an updated fiddle. You'll need change other buttons along the same lines.