Knockout jS

PART 2 (BEGINNERS)

Observables “One of the key benefits of KO is that

it updates your UI automatically when the view model changes.”

How to declare observable?

var myViewModel = {    personName: ko.observable(‘Micro’),    personAge: ko.observable(22)};

Reading and writing observables

Read To read the observable’s current value, just call the observable with no parameters. In this example, myViewModel.personName() will return ' Micro', and myViewModel.personAge() will return 22.

Write To write a new value to the observable, call the observable and pass the new value as a parameter. For example, calling myViewModel.personName('Mary') will change the name value to 'Mary'.

Multiple observable properties To write values to multiple observable properties on a model object, you can use chaining syntax. For example, myViewModel.personName('Mary').personAge(50) will change the name value to 'Mary' and the age value to 50.

Subscribing to observables

For advanced users, if you want to register your own subscriptions to be notified of changes to observables, you can call their subscribe function. For example:

myViewModel.personName.subscribe(function(newValue) {    alert("The person's new name is " + newValue);});

Subscribing beforeChange to observables

If you want to be notified of the value of an observable before it is about to be changed, you can subscribe to the beforeChange event. For example:myViewModel.personName.subscribe(function(oldValue) {    alert(" The person's previous name is " + oldValue);} , null, "beforeChange");

Forcing observables to always notify subscribers

When writing to an observable that contains a primitive value (a number, string, boolean, or null), the dependencies of the observable are normally only notified if the value actually changed. However, it is possible to use the built-in notify extender to ensure that an observable’s subscribers are always notified on a write, even if the value is the same. You would apply the extender to an observable like this:

myViewModel.personName.extend({ notify: 'always' });

Delaying and/or suppressing change notifications

Normally, an observable notifies its subscribers immediately, as soon as it’s changed. But if an observable is changed repeatedly or triggers expensive updates, you may get better performance by limiting or delaying the observable’s change notifications. This is accomplished using the rateLimitextender like this:myViewModel.personName.extend({ rateLimit: 50 });

The rateLimit extender can be applied to any type of observable, including observable arrays and computed observables. The main use cases for rate-limiting are:

Making things respond after a certain delay Combining multiple changes into a single update

Observable Arrays If you want to detect and respond to changes

of a collection of things, use an observableArray.

This is useful in many scenarios where you’re displaying or editing multiple values and need repeated sections of UI to appear and disappear as items are added and removed.

var myObservableArray = ko.observableArray();    // Initially an empty arraymyObservableArray.push('Some value');  // Adds the value and notifies observers

Prepopulating an observableArray

If you want your observable array not to start empty, but to contain some initial items, pass those items as an array to the constructor. For example:

// This observable array initially contains three objectsvar anotherObservableArray = ko.observableArray([    { name: "Bungle", type: "Bear" },    { name: "George", type: "Hippo" },    { name: "Zippy", type: "Unknown" }]);

Reading information from an observableArray

you can get the underlying JavaScript array by invoking the observableArray as a function with no parameters, just like any other observable. Then you can read information from that underlying array. For example:alert('The length of the array is ' + myObservableArray().length);alert('The first element is ' + myObservableArray()[0]);

IndexOfThe indexOf function returns the index of the first array item that equals your parameter. For example, myObservableArray.indexOf('Blah') will return the zero-based index of the first array entry that equals Blah, or the value -1 if no matching value was found.

SliceThe slice function is the observableArray equivalent of the native JavaScript slice function (i.e., it returns the entries of your array from a given start index up to a given end index). Calling myObservableArray.slice(...)

Manipulating an observableArray

observableArray exposes a familiar set of functions for modifying the contents of the array and notifying listeners.

pop, push, shift, unshift, reverse, sort, splice

All of these functions are equivalent to running the native JavaScript array functions on the underlying array:

myObservableArray.push('Some new value') //adds a new item to the end of arraymyObservableArray.pop()  //removes the last value from the array and returns itmyObservableArray.unshift('Some new value') //inserts a new item at the beginning of the arraymyObservableArray.shift() //removes the first value from the array and returns itmyObservableArray.reverse() //reverses the order of the arraymyObservableArray.sort() //sorts the array contents.myObservableArray.splice() //removes and returns a given number of elements starting from a given index. For example, myObservableArray.splice(1, 3)

Manipulating an observableArray

Remove and RemoveAll

observableArray adds some more useful methods that aren’t found on JavaScript arrays by default:

myObservableArray.remove(someItem) // removes all values that equal someItem and returns them as an array

myObservableArray.remove(function(item) { return item.age < 18 }) // removes all values whose age property is less than 18, and returns them as an array

myObservableArray.removeAll(['Chad', 132, undefined]) // removes all values that equal 'Chad', 123, or undefined and returns them as an array

myObservableArray.removeAll() //removes all values and returns them as an array

Thanks

Look at the sky. We are not alone. The whole universe is friendly to us and

conspires only to give the best to those who dream and work.