(There are a ton of questions every day that link back to why can't I set the value of my observable, instead of having so many different answers saying the same thing I wanted to create a question to refer back to for everyone)
Setting the value of my observable observableArray isn't updating!
Why can't I add an item into my Knockout observable array?
To create an observable, assign the ko. observable function to the variable. A default value can be specified in the constructor of the call. Knockout then converts your variable into a function and tracks when the value changes, in order to notify the UI elements associated with the variable.
To clear an observableArray you can set the value equal to an empty array.
An observableArray just tracks which objects it holds, and notifies listeners when objects are added or removed.
ObservableArray is an array that allows listeners to track changes when they occur. In order to track changes, the internal array is encapsulated and there is no direct access available from the outside. Bulk operations are supported but they always do a copy of the data range.
You need to use the setter function to update the value of your observable / observableArray -
Ex. 1 (observable) -
var name = 'John';
var myValue = ko.observable();
myValue(name); // Set myValue equal to John, update any subscribers
var newObservable = ko.observable('Bill');
myValue(newObservable()); // Set myValue equal to the value of newObservable, which is Bill
Ex. 2 (observableArray) -
var names = ['John', 'William', 'Dave'];
var myArray = ko.observableArray();
myArray(names); // Set myArray equal to the array of names John, update any subscribers
var newArray = ko.observableArray(['Sanford']);
myArray(newArray()); // Makes a clone of the array
Note See this Question to understand why this probably not what you are trying to do - What is the best way of cloning/copying an observablearray in knockoutJS?
You need to push the item into the observableArray, not the underlying value of the observableArray -
var name = 'John';
var myValue = ko.observable(name);
var myArray = ko.observableArray();
myValue.push(myValue()); // Add myValue to my observableArray**
You can create a re-usable model to use in your view models. This is similar to using a class in C# to create objects that have common properties.
function objectModel(item) {
var self = this;
self.Name = ko.observable(item.name);
self.Description = ko.observable(item.description);
}
Which can be created like -
var object = {
name: 'John',
description: 'a person'
}
var john = new objectModel(object);
Which could also be done by parameters instead of just objects -
function objectModel(name, description) {
var self = this;
self.Name = ko.observable(name);
self.Description = ko.observable(description);
}
var john = new objectModel('John', 'a person');
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With