Brian J. Cardiff

Almost everybody likes jQuery, I’m one of them. Recently Microsoft publish Client Templates preview 3 which is a awesome client side template engine. One of the best aspects of Client Templates is it’s declarative syntax for attaching behaviors (Sys.UI.Behavior) to a DOM element.

Following I expose the plugin jquery.declarative which allows you to use in a declarative way another jQuery plugin.

N.B.: Along this post I will use a plugin called wajbar, which is near to be published in jQuery plugins directory.

You can download the source code here.

jQuery way

Usually jQuery plugins extend the jQuery interface in simple way:

$(<selector>).<method>(<options>)

for example:

<input type="text" maxlength="60" size="30" id="text1" />
<script type="text/javascript">
    $(function() {
        $('#text1').wajbar();
    });
</script>

Nothing wrong, but thing could turn ugly if you have a lot of plugins and components all around.

declarative way

In order to use a declarative syntax for a plugin named P, you have the following requirements:

• jQuery core
• Microsoft Ajax (MicrosoftAjax.js)
• Microsoft Ajax Templates (MicrosoftAjaxTemplates.js)
• jQuery Declarative plugin (jquery.declarative.js)
• jQuery P plugin which should use syntax: $(<selector>).<method>(<options>);
• Add xmlns:sys=”javascript:Sys” sys:activate=”*” attributes to your body tag.

Note: If you are using a ScriptManager you already have Microsoft Ajax. Microsoft Ajax Templates and jQuery Declarative plugin in must be referenced within the ScriptManager. Otherwise just include the references in that order.

After referencing, you would need to expose the plugin P to jquery.declarative:

//general syntax
// $.declare(<entry method name of P>);
$.declare('wajbar');

This is need just once, usually when DOM ready is ready.

Now, for using a wajbar you need to attach it.

<input type="text" maxlength="60" size="30" sys:attach="wajbar" />

That’s it. Have in mind that using multiple times jquery plugins will be less obstructive this way. No need for additional CSS classname or IDs for later selecting the desired element.

using arguments in plugin initialization

I mention before that jquery plugins usually supports options to be passed in initialization: $(<selector>).<method>(<options>);. For example the wajbar support passing a ‘submit’ property to indicate a DOM that should be disabled if the input value is longer than maxlength.

Given:

<input type="text" maxlength="20" size="40" id="text1" />
<input type="submit" value="submit" id="button1" />

using plain jQuery you would need to call

$('#text1').wajbar({submit: $('#button1')});

but the declarative alternative is now

<input type="text" maxlength="20" size="40"
   sys:attach="wajbar"
   wajbar:submit="{{ $('#button1') }}" />
<input type="submit" value="submit" id="button1" />

you can even get further and remove all the ids of your code and make them really reusable!

<input type="text" maxlength="20" size="40"
   sys:key="self"
   sys:attach="wajbar" 
   wajbar:submit="{{ $(self).next('input:submit') }}" 
/>
<input type="submit" value="submit" />

It’s a bit more complicated the last, but is 100% reusable. With sys:key attribute you said how you want to expose the current DOM element in the evaluation within {{ }}.

ajax partial page load

In order to use the declarative syntax in with partial page rendering you need to call

Sys.Application.processNode(<the new dom element>);

Either the partial page executes that or hook per ajax loaded content, this depends on site conventions.

more than one plugin

This new syntax allows more than one plugin, each with their initialization options. You just need to enumerate the plugins separated by a comma.

For example using the tagSuggestion plugin:

<script src="tag.js" type="text/javascript"></script>
<link href="tag.css" rel="stylesheet" type="text/css" /> <script type="text/javascript">
    $(function() {
        $.declare('wajbar');
        // fake suggestions
        setGlobalTags(['javascript', 'jquery', 'java', 'json']);
        $.declare('tagSuggest');
    });
</script>

Create an input with wajbar and tag suggestion:

<input type="text" maxlength="30" sys:attach="tagsuggest, wajbar" />

Note that the declarative names are lowercase always, no matter the case of the method name, since the namespaces are always lowercase.