Getting started with bindings – part V

Since we’ve already covered the basics in the previous posts, we’ll know start to look at some additional features supported by the binding objects. Today, we’ll concentrate on the convert and convertBack properties. Both of them expect functions that might be used for changing or validating the value that is being propagated from origin to source. As you probably recall, a binding has an origin (object specified through the source property) and a destination (specified through the target property).

The convert function is used when the value is propagated from the source to target; on the other hand, convertBack will only be called when the value is propagated from the target to the source object. Lets take a look at a simple example which shows how to use the convert property:

<body xmlns:sys="javascript:Sys">
  Units: <input type="text" id="units" value="1"/><br />
  Unit Price:<input type="text" id="unitPrice"
                    readonly="readonly" value="$1" /><br />
  Total: <input type="text" id="total"
            sys:value="{binding value, source=units, convert=updateTotal}" />
<script type="text/javascript">
    function updateTotal(val, binding) {
        var price = $get("unitPrice").value;
        var indexOf$ = price.indexOf(''$'') + 1;
        var correctVal = price.substr(indexOf$)
        var numUnits = parseInt(val);
        return "$" + (correctVal * numUnits);

The code isn’t great, but it should be enough for giving you an idea of what you can do with these properties. The previous code attempts to do a simple thing: we need to update the total field when someone changes the number of units in the units textbox.

The updateTotal will be called for adapting the value that will be propagated into the target object. As you can see, you’re supposed to return value from it and that value will be passed to the specified target’s property. convert functions expect two parameters:

  • the first, is that value that is propagated (in the previous example, it’s the value that was changed in the units textbox);
  • the second is a reference to the binding object that is responsible for calling the convert function.

As you might have guessed by now,the convertBack property follows the same guidelines as the one presented for the convert function (the only difference is that it will be called when a value is being propagated from target to origin).

And I guess there’s not much to say about convert and convertBack functions. Stay tuned for more on MS AJAX.


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