Oct 21

The Sys.bind plug-in

Posted in Javascript MS AJAX      Comments Off on The Sys.bind plug-in

We’ve already introduced the concept of MS AJAX plug-in in the previous post. In this post, we’ll explore the Sys.bind plug-in that, as you’ve probably recall, is mapped into the Sys.Binding.bind method. As you’ve probably deduced from its name, you can use this plug-in to establish a binding relationship between two objects. Currently, this plug-in expects until five parameters:

  • target: used for identifying the target of the binding operation;
  • property: string which identifies the name of the property of the target which will be used in the binding operation;
  • source: identifies the source of the current binding operation;
  • path: string which identifies the property of the source object used in the binding relationship;
  • options: literal object used for setting the remaining options of the binding (follows the same rules as the $create helper).

To illustrate its use, we’ll update one of our previous samples so that it uses this new plug-in:

              { mode: Sys.BindingMode.twoWay });

Notice that we’re simply passing strings for all source and target related parameters: we’re being lazy  (always a good thing when the final result is the same 🙂 – btw, we could go one step further by passing the string twoWay to the mode property!,,) and we’re delegating the work of finding the current objects to the binding itself. As you can see, the rules we’ve mentioned when we talked about the Sys.get helper apply here too.

The Sys.Binding.bind method (don’t forget that Sys.bind ends up delegating all the work to this method) is more flexible than we’re used to (when comparing it with previous versions of MS AJAX): instead of setting all the parameters, you can simply pass a literal object with the parameter values you’re interested in setting. In this case, you’re supposed to use the property names you’d use when calling $create for a binding object. Lets update the previous sample so that it uses this approach:

Sys.onReady(function () {
  Sys.bind({ target: "#target",
    targetProperty: "value",
    source: "#source",
    path: "value",
    mode: Sys.BindingMode.twoWay

Even though you don’t gain much (when compared with the previous snippet), the truth is that I like this approach and have suggested its use in the past (ex.: using JSONP). And I guess that’s it. Stay tuned for more on MS AJAX.