为什么我的 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 按钮也应更改为：

<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。您需要按照相同的方式更改其他按钮。

为什么我的 ui 没有更新？

Why is my ui not updating?

data-binding

debugging

jquery

jsfiddle

knockout.js