Detailed examples of using the Knockout array (observable)

1. Simple Example
Copy codeThe Code is as follows:
<Script type = "text/javascript">
Var myObservableArray = ko. observableArray (); // Initialize an empty array
MyObservableArray. push ("Some Value"); // Add an item to the array
</Script>

2. Key point: the monitored array tracks the objects in the array, rather than their own States.
Simply put, placing an object in observableArray will not make the property changes of this object monitorable. Of course, you can also declare the property of this object as observable, but it becomes a dependent monitoring object. An observableArray only monitors the objects it owns and sends a notification when these objects are added or deleted.
3. Pre-load a monitoring array observableArray
If you want your monitoring array to have some initial values at the beginning, you can add these initial objects in the constructor when declaring them. For example:
Copy codeThe Code is as follows:
Var anotherObservableArray = ko. observableArray ([
{Name: "Bungle", type: "Bear "},
{Name: "George", type: "Hippo "},
{Name: "Zippy", type: "Unknown "}
]);

4. Read Information from observableArray
An observableArray is actually an observable monitoring object, but its value is an array (observableArray also adds many other features, which will be introduced later ). Therefore, you can obtain your own values by calling the no-argument function, just like getting a common observable value. For example, you can obtain its value as follows:
Copy codeThe 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 Function to operate these arrays. However, KO provides better functional equivalence functions. They are very useful because:
A: compatible with all browsers. (For example, indexOf cannot be used in IE8 or earlier versions, but KO's own indexOf can be used in all browsers)
B: In terms of array operation functions (such as push and splice), KO can automatically trigger dependency tracing and notify all subscribers of its changes, then, the UI is automatically updated.
C: The syntax is more convenient. You only need to write myObservableArray. push (...) to call KO's push method (...). For example, the native array myObservableArray (). push (...) is much easier to use.
5. IndexOf and slice
The indexOf function returns the first index equal to your parameter array. For example, myObservableArray. indexOf ('blah') will return the index of the first array item equal to the blab value with 0 as the first index. If no equal value is found,-1 is returned.
The slice function is an equivalent function of observableArray compared to the JavaScript native function slice (returns a set of all objects from the start index to the end index ). Calling myObservableArray. slice (...) is equivalent to calling JavaScript native functions (for example, myObservableArray (). slice (...)).
6. Operate observableArray
ObservableArray displays functions similar to array objects and notifies subscribers.
Pop, push, shift, unshift, reverse, sort, splice
All these functions are equivalent to the native functions of the JavaScript array. The subscriber can be notified of the unique array changes:
Copy codeThe Code is as follows:
MyObservableArray. push ('some new value'); // Add a new item at the end of the array.
MyObservableArray. pop (); // deletes the last entry of the array and returns this entry.
MyObservableArray. unshift ('some new value'); // Add an item to the array header.
MyObservableArray. shift (); // Delete the first entry in the array header and return this entry.
MyObservableArray. reverse (); // the order in which the entire array is flipped
MyObservableArray. sort (); // sort the Array

By default, it is sorted by character (if it is a character) or number (if it is a number ).
You can input a sort function to sort the data. This sort function requires two parameters (representing the items to be compared in the array). If the first item is smaller than the second one, -1 is returned. If the value is greater than 1, 1 is returned, and 0 is returned. For example, if you use lastname to sort persons, you can write as follows:
Copy codeThe 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 array object elements of the specified start index and number. For example, myObservableArray. splice (1, 3) deletes three elements (2, 3, 4) from Index 1 and returns these elements as an array object.
For more information about the observableArray function, see the equivalent JavaScript Array standard function.
7. remove and removeAll
Copy codeThe Code is as follows:
ObservableArray adds some functions that are not used by default but are very useful for JavaScript Arrays:
MyObservableArray. remove (someItem); // delete all elements equal to someItem and return the deleted element as an array
MyObservableArray. remove (function (item) {return item. age <18 ;}); // delete all elements whose age attribute is less than 18 and return the deleted element as an array