The observer pattern in AJAX – part II

In the previous post of the series, we’ve seen how easy it is to transform any object into an “observed object”. At the time, we’ve met some of the methods that are dynamically added to the observed object and I’ve promised that we’d talk about the beginUpdate/endUpdate in another post. And that’s why today we’ll concentrate on these two methods. Before getting started, we’ll reuse the code of the previous post:

var student = {
    name: "luis",
    address: "fx"
student.add_propertyChanged(//add an observer function(sender, e) { alert("observer 1:" + e.get_propertyName()); });

And now we’re ready to go! As you probably recall, whenever someone changes a property of the object, the anonymous function used as a handler will be called and will show an alert message. This is probably what we want in most cases, but there might be some scenarios where we’d like to change several properties and notify the interested parties when the object is ready to be consumed. For instance, suppose we need to change the name and the address by using the following snippet:

student.setValue("name", "john"); //event will be fired twice
student.setValue("address", "funchal");

If you run the previous code,you’ll get two notifications: one for the name change and the other for the address update! hum…not really what we wanted,right? What we’d like is a similar behavior to the one we have with windows forms’ controls, where they cancel state change notifications during initialization…and that’s why we’ve got the beginUpdate and endUpdate methods! Take a look at the following improved code:

student.setValue("name", "john"); //event will be fired twice
student.setValue("address", "funchal");

If you run it, you’ll see that you’ll only get a notification which is generated during the endUpdate method call. Another interesting thing is that you won’t be getting the name of the property that was responsible for the event. This is understandable because several properties might have been changed and  “simple observed” objects (ie, observed objects which aren’t arrays) don’t keep track of which properties were changed (they only know if they were changed or not!).

You won’t probably use this technique in such simple scenarios as the one presented in the previous example. This technique is really useful when, for instance, you’ve set up a relationship between a “data container” and a “data presenter” control (for instance, when you pass an array as the data source of a DataView control): in these cases, you’ll probably want that the dataview to render itself when everything has been set up, right”?

And that’s it for this post. Stay tuned for more on MS AJAX.


~ by Luis Abreu on October 2, 2009.

Leave a Reply

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

You are commenting using your 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: