Observable Array (monitor array) function
List operations are often encountered in a scene, using a monitoring array, you can:
- Save the list object and use the Rich API action list elements provided by KO (the method that supports the built-in JS array, and the method that Ko himself added: Remove,removeall, etc.)
- Monitors changes in the number of array elements and automatically notifies the outside. If the UI is bound, the UI is updated automatically
Observable Array and JS built-in array difference
- The Observable array is a KO object that wraps an array object inside, and the latter is just an array object.
- The former can track the number of changes in the array, which cannot
- The former can use JS built- in Array object method +ko Extended API to manipulate the data, which can only use JS built-in Array object provides methods to manipulate the data
Observable Array Considerations
Here you need to suggest a little bit to observable array to understand where deviations may occur:
- the Observable array does not monitor the changes in the element itself: The Observable array only handles changes in the number of elements, such as the deletion and addition of array elements. Whether the element itself is automatically monitored depends on the element itself as a normal object or a observable object.
- How to monitor both the number of array elements and the change in element content: When you push an element in an array, you use the observable element to automatically monitor its own changes.
Example explanation: Observable Array basic Syntax 1, definition
var myobservablearray = Ko.observablearray (); // establish a monitoring array myobservablearray.push (' Some value '); // To add an array element using the Push method var anotherobservablearray = Ko.observablearray ([ "bungle", type: "Bear" }, " George ", type:" Hippo " }, " Zippy ", type:" Unknown " }]); // arrays can be initialized at the same time as the monitoring array is established
2. Read
Alert (' The length of the array is ' + myobservablearray (). length); // use the () number to read the array elements, and then you can manipulate the JS The properties of the Array Object alert (' The first element is ' + myobservablearray () [0]); // read the first element
3. Write
var a =ko.observablearray ([' 1 ', ' 2 '])// Initialization Write value a ([' 3 ', ' 4 ']); // use (value) to re-write data, now a () =[' 3 ', ' 4 ']
4. Subscription array element number Change event
var myobservablearray = ko.observablearray (); Myobservablearray.subscribe (function (newval) { alert (newval.length); Alert (newval[0]); }); // subscribing to array element change events, NewVal will pass in the changed array object Myobservablearray.push (' 1 '); // push a new element in, it will alert a length, and ' 1 '
5, KO extended array API
varMyobservablearray = Ko.observablearray (["Item1", "item2", "Item3", "Item4", "ITEM5", "Item6", "7", "8"]);//building a monitoring arrayMyobservablearray.remove ("Item1");//Remove Item1Myobservablearray.remove (function(item) {returnItem.length < 4;//only elements with a length less than 4 are removed});//Remove "7", "8"Myobservablearray.removeall (["Item2", "Item3"]);//Remove Item2,item3Myobservablearray.removeall ();//Remove all the
Knockout Observable Array (monitor array)