MrFox MrFox - 3 years ago 170
jQuery Question

Why is my ui not updating?

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 Source

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.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download