Detailed example of using Knockout array (observable)_Basic knowledge

< script type="text/javascript"> var myObservableArray = ko.observableArray(); ///Initialize an empty array
myObservableArray.push("Some Value"); ///Add to the array An item

2. Key point: The monitoring array tracks the objects in the array, not the status of the objects themselves. Simply put, placing an object in an observableArray will not make the property changes of the object itself monitorable. Of course, you can also declare the properties of this object as observable, but it becomes a dependency monitoring object. An observableArray simply monitors the objects it owns and notifies when these objects are added or removed.

3. Preload a monitoring array observableArray

If you want your monitoring array to have some initial values ​​at the beginning, then when declaring it, you can add it in the constructor Join these initial objects. For example:

Copy code

The code is as follows:
var anotherObservableArray = ko.observableArray([
{Name: "bungle", type: "bear"}, {name: "george", type: "hippo"},
{name: "zippy", type: "unknown" 🎜 > ]);

4. Read information from observableArrayAn observableArray is actually an observable monitoring object, but its value is an array (observableArray Many other features have been added, which will be introduced later). So you can get its own value just like getting the value of an ordinary observable by calling the parameterless function. For example, you can get its value like this:

Copy the code


The code is as follows:

alert('The length of the array is ' myObservableArray().length);alert('The first element is ' myObservableArray()[0]);

Theoretically you can use Any native JavaScript array functions can be used to manipulate these arrays, but KO provides better functional equivalents. They are very useful because:

A: Compatible with all browsers. (For example, indexOf cannot be used on IE8 and earlier versions, but KO's own indexOf can be used on all browsers) B: In terms of array operation functions (such as push and splice), KO's own method can automatically trigger dependencies Track and notify all subscribers of its changes, and then let the UI interface automatically update accordingly. C: The syntax is more convenient. To call KO's push method, you only need to write like this: myObservableArray.push(...). For example, myObservableArray().push(...) for native arrays is much easier to use. 5.IndexOf and sliceindexOf function returns the first index equal to your parameter array item. For example: myObservableArray.indexOf('Blah') will return the index of the first array item equal to Blah with 0 as the first index. If no equal is found, -1 will be returned. ​

The slice function is the equivalent function of observableArray relative to the JavaScript native function slice (returns a given collection of all objects from the start index to the end index). Calling myObservableArray.slice(...) is equivalent to calling a JavaScript native function (for example: myObservableArray().slice(...)).

6. Operate observableArray

observableArray shows functions similar to array objects and notifies subscribers.

pop, push, shift, unshift, reverse, sort, splice
All these functions are equivalent to JavaScript array native functions. The only difference is that array changes can notify subscribers:



Copy code

The code is as follows:

myObservableArray.push('Some new value');//Add a new value at the end of the array ItemmyObservableArray.pop(); // Delete the last item in the array and return it
myObservableArray.unshift('Some new value'); // Add an item to the head of the array
myObservableArray.shift ();// Delete the first item at the head of the array and return it
myObservableArray.reverse();// Reverse the order of the entire array

myObservableArray.sort();// Sort the array
By default, it is sorted by character (if it is a character) or numerically (if it is a number).
You can sort by passing in a sorting function. The sorting function needs to accept 2 parameters (representing the items that need to be compared in the array). If the first item is less than the second item, -1 is returned, and if it is greater than Returning 1 is equivalent to returning 0. For example: to sort persons by lastname, you can write like this:

Copy the code The code is as follows:

myObservableArray.sort(
function(left, right) {
return left.lastName == right.lastName ? 0 : (left.lastName < right.lastName ? -1 : 1);
} );

myObservableArray.splice() deletes the specified starting index and the specified number of array object elements. For example, myObservableArray.splice(1, 3) removes 3 elements (the 2nd, 3rd, and 4th elements) starting from index 1 and returns these elements as an array object.
For more information about the observableArray function, please refer to the equivalent JavaScript array standard functions.
7.remove and removeAll

Copy code The code is as follows:

observableArray added some JavaScript arrays do not have a default but very useful function:
myObservableArray.remove(someItem);// Remove all elements equal to someItem and return the deleted elements as an array
myObservableArray.remove(function (item) { return item.age < 18;}) ;//Delete all elements with age attribute less than 18 and return the deleted elements as an array