The observer pattern in AJAX – part III

In the previous posts of the series, we’ve started looking at how the new AJAX library helps implement the observer pattern in JavaScript. Today we’re going to talk a little more about this topic with an overview of how you can use the Sys.Observer helper with arrays. For starters, lets assume we’ve got a simple observable array which looks like this:

var arr = [1, 2, 3];
Sys.Observer.makeObservable(arr);

Transforming an array into an observable array results in adding several properties to the ones you get by default when you work with an array. Take a look at the next picture:

observablearray

As you can see, most of the methods are related with adding new items to the array. The idea is the same as before: in order for you to get notifications, you must add items to an array by using these new methods (it goes without saying that adding methods through the traditional push or index approach will simply result in getting no notifications). Here are some quick examples of how you can use the new methods:

arr.add(4);
arr.addRange([2, 3, 5]);
arr.remove(3);

You’ve probably noticed that observable arrays get an extra event: collectionChanged. This event will be generated whenever you add/remove items through the “observable methods” (which got added to the object after the makeObservable method invocation). Handlling this event is simple: you only need to know that the function will receive two parameters. The first, identifies the responsible for the event (ie, the array object itself) and the second is an object of type Sys.NotifyCollectionChangedEventArgs. This object exposes one property, changes ,which let you get an array of Sys.CollectionChange objects with information on the changes that have been made to the array.

The Sys.CollectionChange event is way more interesting and has several properties:

  • action: Sys.NotifyCollectionChangedAction enum which indicates the current operation;
  • newItems: array with the new items that have been added to observable array;
  • newStartingIndex: gets the position at which new elements will be added;
  • oldItems: array with the elements that have been removed from the array;
  • oldStartingIndex: gets an integer which specifies the last position at which new items were supposed to be added to the array.

Since you’ve met the beginUpdate/endUpdate methods,it should be easy to understand that you’ll only get newItems and oldItems filled simultaneously when you suspend notifications by calling beginUpdate, perform several additions and removals, and then reset notifications by calling the endUpdate method. Here’s a quick example you can run to get a feeling on how things work:

arr.addEventHandler("collectionChanged",
    function(o, e) {
        var changes = e.get_changes();
        var info = [];
        var i = 0;
        for (var i in changes) {
            var arrInfo = changes[i];
            info.push("action: " + Sys.NotifyCollectionChangedAction.toString(arrInfo.action));
            info.push("n");
            info.push("newItems: " + arrInfo.newItems);
            info.push("n");
            info.push("newStartingIndex:" + arrInfo.newStartingIndex);
            info.push("n");
            info.push("oldItems:" + arrInfo.oldItems);
            info.push("n");
            info.push("oldStartingIndex:" + arrInfo.oldStartingIndex);
            info.push("nn");
        }
        alert(info);
    });
arr.beginUpdate();
arr.add(4);
arr.addRange([2, 3, 5]);
arr.remove(3);
arr.endUpdate();

As you can see, we add and remove several items before restoring notifications through the endUpdate method call. The previous code should result in getting 3 notification changes grouped in a single collectionChanged event.

There’s still one more exotic use of the Sys.Observer helper, but we’ll leave it for a future post. Stay tuned for more on the MS AJAX library.

Advertisements

~ by Luis Abreu on October 6, 2009.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

 
%d bloggers like this: