Knockout Observable Array (monitor array)

Source: Internet
Author: User

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)

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.