The Knockout array of observable USES the elaboration example

  • 2020-03-29 23:46:30
  • OfStack

1. Simple examples

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

2. Key point: the monitor array tracks the objects in the array, not the state of the objects themselves.
Simply put, placing an object in observableArray does not make the object's own properties change to be monitored. Of course, you can declare this object to be observable yourself, but it becomes a dependent monitor. A observableArray simply monitors the objects it owns and notifies when they are added or removed.
3. Preload a monitoring array, observableArray
If you want to start your monitoring array with some initial values, you can add these initial objects to the constructor when you declare. Such as:

var anotherObservableArray = ko.observableArray([
        { name: "Bungle", type: "Bear" },
        { name: "George", type: "Hippo" },
        { name: "Zippy", type: "Unknown" }

Read the information from observableArray
An observableArray is actually an observable monitoring object, except that its value is an array (observableArray adds a number of other features, more on that later). So you can get the value of the observable by just calling the argument free function. For example, you can get its value as follows:

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

In theory you can use any native JavaScript array function to manipulate these arrays, but KO provides better functional equivalence functions that are useful because:
A: it works with all browsers. (for example, indexOf is not available on IE8 and earlier versions, but KO's own indexOf is available on all browsers)
B: in the case of array manipulation functions (such as push and splice), KO's own approach automatically triggers dependency tracing, notifies all subscribers of its changes, and then lets the UI update automatically accordingly.
C: the syntax is more convenient to call KO's push method by saying: myobservablearray.push (...) . For example, the native array myObservableArray().push(...) Much better.
5. IndexOf and slice
The indexOf function returns the first index equal to the item in your argument array. For example: myObservableArray indexOf (" Blah ") will return to zero for the first index of the first is equal to the array of Blah index. If no equality is found, negative 1 is returned.
The slice function is the observableArray equivalent of the JavaScript native function slice (which returns a given set of objects between the start index and the end index). Call myObservableArray. Slice (...). This is equivalent to calling JavaScript native functions (for example: myObservableArray().slice(...)) ).
6. ObservableArray operation
ObservableArray presents functions similar to array objects and notifies subscribers.
Pop, push, shift, unshift, reverse, sort, splice
All of these functions are equivalent to JavaScript array native functions, only the different array changes can inform the subscriber:

myObservableArray.push('Some new value');//Add a new item to the end of the array
myObservableArray.pop();//Deletes the last item in the array and returns that item
myObservableArray.unshift('Some new value');//Add an item to the head of the array
myObservableArray.shift();//Deletes the first item in the array header and returns that item
myObservableArray.reverse();//Flip the order of the entire array
myObservableArray.sort();//Sort an array

By default, it is sorted by characters (if characters) or by Numbers (if Numbers).
    You can sort by passing in a sort function that takes two arguments (representing the items in the array to be compared), returns -1 if the first item is less than the second, and 1 if it is greater than the second, equal to 0. For example, with lastname to sort person, you can write:

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

Myobservablearray.splice () deletes the array object elements that specify the starting index and the specified number. For example, myobservablearray.splice (1, 3) removes three elements (the second, third, and fourth elements) from index 1 and returns them as an array object.
For more information about the observableArray function, see the equivalent JavaScript array standard function.
7. Remove and removeAll

observableArray  Added a few JavaScript Array default does not have but is very useful function: 
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 with the age attribute less than 18 and return the deleted element as an array

Related articles: