1. Simple examples
Copy Code code as follows:
<script type= "Text/javascript" >
var Myobservablearray = Ko.observablearray (); Initializes an empty array
Myobservablearray.push ("Some Value"); Add an item to the array
</script>
2. Key point: The monitoring array tracks the objects in the array, not the state of the objects themselves.
Simply put, putting an object in the Observablearray does not make the object's own property changes controllable. Of course you can also declare that the object's attributes are observable, but it becomes a dependent monitoring object. A Observablearray only monitors the objects he owns and notifies them when they are added or deleted.
3. Preload a monitoring array observablearray
If you want your monitoring array to have some initial values at the beginning, you can add these initial objects to the constructor when you declare them. For example:
Copy Code code as follows:
var anotherobservablearray = Ko.observablearray ([
{name: ' Bungle ', type: ' Bear '},
{Name: "George", type: "Hippo"},
{name: ' Zippy ', type: ' Unknown '}
]);
4. Read information from Observablearray
A observablearray is actually a observable monitor object, except that his value is an array (Observablearray adds a lot of other features, which are described later). So you can get the value of your own by simply calling a parameterless function, just as you would get a normal observable value. For example, you can get its value as follows:
Copy Code code as follows:
Alert (' The length ' of the array is ' + myobservablearray (). length);
Alert (' The ' is ' + myobservablearray () [0]);
Theoretically you can use any native JavaScript array function to manipulate these arrays, but KO provides a better functional equivalence function, and they are 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 the array manipulation functions (such as push and splice), KO's own way can automatically trigger dependency tracking and notify all subscribers of its changes, and then let the UI interface also automatically update accordingly.
C: syntax is more convenient, call Ko's push method, only need to write: Myobservablearray.push (...). For example, the Myobservablearray () of the native array (). Push (...) It's much more useful.
5.IndexOf and Slice
The INDEXOF function returns the first index that equals the item of your argument array. For example: Myobservablearray.indexof (' blah ') returns the index of the first array item equal to blah with 0 as the first index. If no equivalent is found, 1 is returned.
The slice function is the equivalent function of the Observablearray relative to the JavaScript native function slice (returns the given collection of objects from the start index to the end index). Call Myobservablearray.slice (...) Equivalent to invoking a JavaScript native function (for example: Myobservablearray (). Slice (...) ）。
6. Operation Observablearray
Observablearray shows a function similar to the array object and notifies the subscriber of its function.
POPs, push, shift, unshift, reverse, sort, splice
All of these functions are equivalent to the native functions of JavaScript arrays, and the only different array changes can be notified to subscribers:
Copy Code code as follows:
Myobservablearray.push (' Some new value ');//Add a new item at the end of the array
Myobservablearray.pop ()//Deletes the last item of the array and returns the item
Myobservablearray.unshift (' Some new value ');//Add an item to the array header
Myobservablearray.shift ()//deletes the first item in the array header and returns the item
Myobservablearray.reverse ()//Flip the order of the entire array
Myobservablearray.sort ()//to sort the array
By default, it is sorted by character (if it is a character) or numeric (if it is a number).
You can sort by passing in a sort function that needs to accept 2 parameters (representing the items that need to be compared in that array), if the first item is less than the second item, return-1, or greater than to return 1, equal to 0. For example: Sort by LastName to person, you can write this:
Copy Code code as follows:
Myobservablearray.sort (
function (left, right) {
return left.lastname = = Right.lastname? 0: (Left.lastname < right.lastname -1:1);
});
Myobservablearray.splice () Deletes the specified start index and the specified number of array object elements. For example, Myobservablearray.splice (1, 3) deletes 3 elements (2nd, 3, 4 elements) from index 1 and then returns the elements as an array object.
For more information on the Observablearray function, refer to the equivalent JavaScript array standard function.
7.remove and RemoveAll
Copy Code code as follows:
Observablearray added some JavaScript arrays that have no but very useful functions by default:
Myobservablearray.remove (Someitem)//deletes all elements equal to Someitem and returns the deleted element as an array of
Myobservablearray.remove function ( Item) {return Item.age < 18;}) //delete elements of all age attributes less than 18 and return the deleted element as an array
