Getting started with bindings – part II

In the previous post, we’ve see how we can use one-time/one-way bindings through {{ }} expressions. As I’ve said, MS AJAX also introduces the concept of live bindings. Live bindings are way more powerful than the one-time/one-way bindings we’ve met in the previous post. Unlike those bindings, which rely on simple JavaScript evaluations (through the eval method), live bindings are always represented by Sys.Binding object instances and allow the other binding scenarios we’ve spoken about in the previous post.

Live bindings can be specified through JavaScript (aka imperative approach) or by using a declarative approach. In this post, we’ll concentrate on using the imperative approach and we’ll leave the declarative approach for a future post. Sys.Binding instances are also components because the Sys.Binding type extends the Sys.Component class with the addition of several interesting properties and methods. We’ll start by presenting the most important ones:

  • source: identifies the object used as source of the binding;
  • path: string which identifies the name of the property of the source object that participates in the binding relationship;
  • target: identifies the object used as the target of the current binding relationship;
  • targetProperty: string which identifies the property of the target object that participates in the binding relationship;
  • mode: identifies the type of binding. You can use any value from the Sys.BindingMode enum (oneTime, oneWay, twoWay, auto e oneWayToSource).

These are the most used properties , but do keep in mind that there are more (we’ll come back to them in future posts). The mode property determines how changes are propagated:

  • oneTime means that you’ll only have changes propagated from source to destination during initialization time.
  • oneWay means that changes are propagated from source to target. Every time the source’s property used in the binding changes, the value is “copied” into the destination property;
  • twoWay: in this case, changes made on source are propagated to target and vice-versa;
  • oneWayToSource: similar to oneWay,but propagations are made in the inverse direction.

So,to introduce this, we’ll reuse the previous textboxes, but this time we’ll create a two way binding between them. Here’s the code needed for this relationship:

 <input type="text" id="source" value="Hi from bindings world!" />
 <input type="text" id="target" />
<script type="text/javascript">
    function pageLoad() {
        var binding = new Sys.Binding();
        //set source
        //set target
        binding.initialize();//DON''T FORGET THIS

Some observations regarding the previous code:

  • setting the source means setting the source and path properties. The source property expects a reference to an object and path a string which identifies the name of a property defined by the object referenced by source;
  • setting the target is similar: the difference is that we use target and targetProperty properties;
  • we don’t set the mode property explicitly. That means that mode will have the default value. The auto value means that the binding’s mode will depend of the type of object used as a target.  For inputs, selects, textareas and JS objects that implement the INotifyPropertyChanged interface result in two way bindings; when that doesn’t happen, you end up getting a one way binding (which means that changes on the source will be propagated into the target, but not the only way around);
  • in order to make everything work, we need to initialize the binding (don’t forget: binding is also a component and there’s some work that needs to be done during initialization time).

We still need to talk about a couple of properties that influence what happens during the propagation phase, but we’ll leave it for a future post (now I really need to go because it’s time to run my daily 4km 🙂 ) Stay tuned for more.


~ by Luis Abreu on October 9, 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: