The DataView control and “external templates”

The first (and only!) example on templates we’ve studied until now relied on defining templates within the control that was attached to the DataView MS AJAX control. At the time, I said that the DataView control also supported external templates. To illustrate this feature, we’ll change our initial example so that the template is hosted outside the DOM node that is attached to the DataView control (I’m only showing the markup since the JS code is the same):

<body
    xmlns:sys="javascript:Sys"
    xmlns:dv="javascript:Sys.UI.DataView">
    <ul sys:attach="dv"
        dv:data="{{ data }}"
        dv:itemtemplate="myTemplate">

    </ul>
    <ul id="myTemplate" class="sys-template">
        <li>{{ name }} - {{ address }}</li>
    </ul>
</body>

We’ve introduce a new UL element which defines the template that will be used by the DataView control. As you can see, we no longer need to apply the sys-template css class to the UL that is attached to the DataView control that will be created during initialization time. What we need to do is set its itemTemplate property. We do that by setting the dv:itemtemplate attribute to the ID of the HTML element that “defines” the template.

We can even go one step further: we can influence the place where the DataView control will put the HTML generated through the template instantiation. Take a look at the following improved snippet:

<body
    xmlns:sys="javascript:Sys"
    xmlns:dv="javascript:Sys.UI.DataView">
    <ul sys:attach="dv"
        dv:data="{{ data }}"
        dv:itemplaceholder="putItHere"
        dv:itemtemplate="myTemplate">
        <li>Top item</li>
        <li id="putItHere"></li>
        <li>Bottom item</li>
    </ul>
    <ul id="myTemplate" class="sys-template">
        <li>{{ name }} - {{ address }}</li>
    </ul>
</body>

This snippet is really similar to what we had. There is, however, one difference: we’re using the dv:itemplaceholder attribute to set the value of the DataView’s itemPlaceholder property. Do notice that the place holder will end up seeing its display set to none so that you can’t see it when the page is loaded. If we hadn’t used the itemPlaceholder property, the contents of the UL element would have been replaced by the new nodes obtained through the template instantiation process.

And that’s it for now. We’ll keep looking at MS AJAX in the next posts. Stay tuned for more!

Advertisements

~ by Luis Abreu on October 15, 2009.

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: