Understanding plug-ins in MS AJAX

The latest release of MS AJAX introduces the concept of plug-ins (which, btw, is different from what you have in other JS frameworks – ex. JQuery). Plug-ins can be seen as simple methods which get added to the “global” Sys object (ie, defining a plug-in results in creating a shortcut in the Sys object). Besides expanding the Sys object with new methods, plug-in registration ends up adding a custom info to the Sys.plugins object (you can think of this object as a global repository for MS AJAX plug-ins).

As you’re probably expecting by now, plug-in registration is done during script definition, ie, when you call the defineScript(s) method. For instance, the template script file (MicrosoftAjaxTemplates.js) introduces a plug-in during its definition. Here’s the code used by it:

{ name: "Templates",
    executionDependencies: [
"ComponentModel", "Serialization"], behaviors: ["Sys.UI.DataView"],plugins: [{
plugin: "Sys.Binding.bind",
parameters: [
isLoaded: !!(Sys.UI && Sys.UI.Template) },

Registering a plug-in is done by passing an anonymous object and involves setting several properties:

  • name: defines the name of the current plug-in. Internally, the name ends up being used in two places: 1.) it’s used for registering the plug-in with the Sys.plugins object and 2.) it’s used to name the property that is added to the Sys object and which references an anonymous function which ends up calling the “real” plug-in function;
  • plugin: identifies the function which ends up being called when someone accesses the registered plug-in through the Sys.XXX object (in the previous example, that will be the “static” Sys.Binding.bind method);
  • parameters: give information about the parameters expected by the real function passed to the plugin property. A parameter can be represented by a simple string or by an anonymous object with the properties which can describe the parameter (you can use the same values as the ones that are used for adding info that is shown by VS JS intellisense). In the previous snippet, only name and type are used. The name will be used to indicate the name of the parameter; type is there for giving additional info about the current parameter.

As I’ve said above, plug-in definition ends up creating a new anonymous method. Here’s how it looks like:

function anonymous(
target, property, source, path, options) { /// <param name="target" type=""></param> /// <param name="property" type="String"></param> /// <param name="source" type=""></param> /// <param name="path" type="String"></param> /// <param name="options" type=""></param> return Sys.loader._callPlugin.call( this, "bind", "Sys.Binding.bind",
arguments, false, this); }

After registering a plug-in, you can invoke it simply by using its name. For instance, take a look at the following image:


As you can see, Sys now has a method called bind and you even get intellisense for that method call (btw, the previous image was capture in VS 2008)! Notice that you can also get info about a previously registered plug-in (since it got added to the Sys.plugins object during script definition). The next image shows the kind of info you can get from a sys.plugins entry:


Currently, MS AJAX introduces only two plugins: setCommand and bind. We’ll talk about them in future posts. Stay tuned for more!


~ by Luis Abreu on October 21, 2009.

3 Responses to “Understanding plug-ins in MS AJAX”

  1. Worth noting is that if you have jQuery loaded in the page, a jQuery plug-in will also get created for free, so you can also do $(“.myfield”).bind(…);

  2. Yep, but I”m still preparing the post on jquery integration…

  3. Green Fill,option may air impression music exhibition include incident fire yes mark promote yard impossible local simply severe crime associate little him writing survive none little secure sex consist outside technique plate access directly story pull much base blue path description past study sign impossible nuclear finish long silence home like think sexual labour person literature list thin vary solicitor forest instance wood any radio importance must difficult equipment design so site surely potential good component teaching individual neighbour plan usual involve half steal history

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: