Getting started with bindings – part I

Bindings are one of those things to which we get used to really fast: for instance, who prefers to write the code that guarantees that two textboxes are in sync when they can simply use an object that establishes that relationship and does all the work for you?

Ok, I’m probably going too fast, right? Let’s step back a little bit and try to define a binding. A binding establishes a relationship between two objects and ensures that one object’s property (the target) gets its value from  the other object’s property (the source). Now, with this basic definition, we can already think of several types of binding.

For instance, there are times where all you need is to get an initial value and don’t care about updates or changes made to that value. These are simply called one-time/one-way bindings. There are other times where you’re really interested in getting updates after the initial setup. This is still one-way, but now you’re talking about something which (at least in MS AJAX) is called live bindings.

In fact, you can even get fancy and say that you want to have both objects in complete synchronous. In other words, changes in the source should be propagated to the target (the default behavior), but changes in the target should also be propagated back to the source. Yep, MS AJAX also supports this concept through two way live-bindings.

Basically,MS AJAX supports all the previous scenarios through two basic types of bindings: one-time/one-way bindings and the so called live-bindings. In this topic,we’ll concentrate on understanding one-time/one-way bindings. Before getting started, lets assume that we’ve got the following HTML (btw, I’m assuming that you’ve added the base MS AJAX script file and the new MicrosoftAjaxTemplates file):

<input type="text" id="source" value="Hi from bindings world!" />
<input type="text" id="target" />

one-time/one-way bindings will only update the target object during initialization time. You can do that from JavaScript with a simple line of code:

function pageLoad() {
    $get("target").value = $get("source").value;

Now, you’re probably thinking: “Wtf? this is what I’ve been doing for a long time!”. And yes, I’ve been doing that too for some time (at least, I did when I was an active JS developer).

There really isn’t any kind of object for representing this kind of binding in MS AJAX (I think that we can all agree that there’s nothing that beats the previous line of code for initializing a property once). The good news is that the team has introduced a declarative model, where you can set things up directly in the markup! Take a look at the following snippet:

<body xmlns:sys="javascript:Sys">
<input type="text" id="source" value="Hi from bindings world!" />
<input type="text" id="target" sys:value="{{$get(''source'').value}}"/>

There are some “strange” things going on here…lets see if I can explain it in a simple way. The declarative model (to which I’ll come back in future posts) relies on XHTML extensions for doing its work. The sys alias is a special alias and, as you can see, it’s mapped to the Sys JavaScript namespace.  If you’re thinking about using a different alias, then *don’t*! The platform relies on the sys name for identifying the attributes that need “special processing” (even though this is not really XML conformant, the truth is that using a fixed name improves the performance of the parsing).

By “associating” an attribute with the sys namespace, you’re saying that MS AJAX should have a go at it during initialization time. In case you’re thinking about it, the answer is yes, you can “associate” any attribute to this alias (in other words, you can use sys:attributeName for any attribute that requires parsing/interpretation during initialization time). There are also a couple of special attribute names, but we’ll leave those for future templates.

Expressions delimited by {{ }} will always be interpreted as JavaScript expressions through the eval method. That’s why we’ve used the $get helper in order to get the value of the other control. It’s imperative that you pass a valid JavaScript expression when using the {{ }}.

As you can see, the only thing special you’ll find in one-time/one-way bindings is the declarative model which lets you initialize stuff without writing JavaScript. Btw, even though I’ve established a one-time/one-way binding between two textboxes, nothings prevents you from creating one between a control and, say, a JavaScript object. The only thing you must ensure is that the {{ }} expression is a valid JavaScript expression.

And that’s it for now. In the next post we’ll start looking at the far more interesting live bindings objects. Stay tuned for more.


~ by Luis Abreu on October 9, 2009.

5 Responses to “Getting started with bindings – part I”

  1. How do we handle loading the above html from another .htm/.aspx page? You say that the declarative code is parsed during the initialization time.

    If the code is brought in after the page has loaded, how does it then get parsed?

    Or we forced to hook up the event of the loaded code by $addHandler or jQuery like in your example above?

    Sorry if all of my terminology is not correct.

    Thank you,
    William Apken

  2. Great job keeping us up to date with Preview 5. Not much information out on the net. And no books available.
    AJAX in Action but it is out of date with new previews.

    William Apken

  3. Hello William.

    I probably wasn”t clear enough. The post presents two examples. in the first, you have the inputs + script for doing one-time/one-way binding; the second, you”ve just got the html with the sys attributes on. btw, in the script example I”ve used the pageLoad because it seemed a good place to perform the intialization. it would be ok to put the initialization code outside of a function too.

    the declarative approach relies on having some of the HTML code parsed and transformed in JS. For instance, in the previous example sys attributes with {{}} expressions are parsed during initialization. Besides these simple expressions there”s still the topic of markup extensions (used in the current preview for parsing live binding extensions – more about these topics in future posts). and then there are templates, which do have good support for a declarative approach.

    when I say declarative, I”m thinking on things like sys:value=”{{ … }}” which get further parsing during the MS AJAX client lib initialization time.

    When I say initialization, I”m thinking of the Sys.Application”s init event time line.

  4. Ok. There clears some things up. I still have not gotten my mind wrapped around the whole thing yet.

    When I loaded from another page. I mean with the .load or .get from jQuery.

    A user request a grid (or something) I have that grid into another .aspx page. I just load in the div that contains the grid. I then insert the loaded html into a div that is currently in the DOM.

    I do this already. Not grids. I do have a form that accepts infomation.
    If interested. It is just a cheesy newsletter I do for a local company. Any way.

    I use the .live function in jQuery. So, when the html is loaded in, the events are already hooked up.

    I also have one page (it was a test) that the .js was placed into its own .js file. That file is loaded after the html is loaded and jammed into the div. I append the loaded .js file and append to the head. This cause the imported .js to be eval()éd. This works also.

    This is not a good thing to do. If the site was larger I would be overloaded with all the .js for all possible pages that the user could select. It works in this small site.

    What I what to do is, load the html from another file and then $create(dataview) (not all parameters) hook it up to an existing div. But I want the .js to be linked with the page I”m loading. I know this is not clear. sorry.

    I wanted to use a component to describe the html and behaviors, events of the loaded html. (component).

    When I”m finished I could just dispose of the component. And from my understanding when I dispose all memory used to describe the component would be released and all eventHandles, behaviors and such would also be released.

    Thank you so much,
    William APken

  5. hello again William.

    jquery”s load method is different. it expects to receive HTML from the server side and it will simply do a innerHTML into the container you”ve specified. Currently, MS AJAX hasn”t got anything which looks like live. The good news is that you can use both frameworks simultaneously.

    MS AJAX approach is very different. The idea is to have a component model in the client. I”ve started with bindings because the rest of the posts will build upon the features presented earlier (for instance, when we get to templates, you”ll see that they typically use bindings to get the data from the data source).

    I”m not sure on what you mean by creating a dataview and using an external template defined in a separate file. That”s not how it works with the dataview. the dataview is supposed to be defined in the client side and it”s supposed to be the “equivalent” of what you”ve got in the server side (think, for instance, in the listview control, where you use templates to define its appearance – the difference is that the dataview control is a client side component).

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 )

Google+ photo

You are commenting using your Google+ 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 )


Connecting to %s

%d bloggers like this: