11.9. Advanced Binding

By now you probably are excited about how easy the Microsoft AJAX libraries can make client-side data binding. The ASP.NET AJAX libraries also contain a number of other useful features that I will cover now:

• Conditional rendering

• Converters

• Two-way data binding

• Implementation of the Observer pattern

11.9.1. Conditional Rendering

Sometimes you will want to apply logic to the rendering of your content—perhaps in a medical application to highlight abnormal lab results. The ASP.NET AJAX libraries allow you to do this by embedding conditional logic within your markup.

Be careful when using this approach. You are polluting the UI with business logic, which will be harder to maintain and is more easily corrupted by designers.

Let's look at the different conditional logic statements you can utilize.

11.9.1.1. sys:if

The sys:if condition applies only if a condition is true. Suppose that you want to render a warning <div> if a particular person's name comes up in the bound data. This is easily achieved as follows:

<div sys:if="$dataItem.Name == 'Barry Dorrans'">Warning do not approach!</div>

11.9.1.2. $dataItem

In the preceding example, you needed to reference data in the bound set. To do this, you used the $dataItem object. This allows you to access individual properties with the following syntax:

$dataItem.MyPropertyName

11.9.1.3. $index

You can also apply code based on the index position of the item by querying the $index pseudo property:

<div sys:if="$index == 0">first</div>

11.9.1.4. sys:codebefore and sys:codeafter

Sometimes you want to render HTML before or after the element you are binding. The codebefore and codeafter statements allow you to do this:

<div
    sys:if="$index == 0"
    sys:codebefore="$element.innerHTML='I get placed first'"
    sys:codeafter="$element.innerHTML='I get placed second'"
    >
</div>

11.9.1.5. sys:innertext and sys:innerhtml

Finally, it can be useful to output text or HTML (similar to JavaScript's innerText or innerHtml properties):

<div sys:innertext="{{ foo }}"></div>
<div sys:innerhtml="{{ foo }}"></div>