Using nested tempates

The last post might have left you thinking that templates still need some working. After all, using sys:beforecode and sys:aftercode doesn’t really look well, right? Yes, I agree: it’s a little bit ugly. In fact, lets recover the (offending?) code we’ve used here in that sample:

<p
    sys:codebefore="for(var pos in contacts){"
    sys:codeafter="}">
    {{contacts[pos]}}
</p>

Now, the question is: can we improve our code and remove those ugly sys:beforecode and sys:aftercode attributes from our markup? If you’re an Obama supporter, you already know the answer: “Yes, we can!

The answer lies in using nested templates! Lets update the code to use nested templates (the JavaScript is the same, so I’ll just put the updated markup):

<body xmlns:sys="javascript:Sys"
      xmlns:dv="javascript:Sys.UI.DataView">
    <div id="list"
         class="sys-template"
         sys:attach="dv"
         dv:data="{{data}}">
        <div>
            {{name}}<br />
            <div id="innerTemplate"
                class="sys-template"
                sys:attach="dv"
                dv:data="{{contacts}}">
                <p>
                {{$dataItem}}
                </p>
            </div>

        </div>
        <hr sys:if="{{ ($index + 1) % 2 === 0 }}" />
    </div>
</body>

Ok, lets see what we’ve got here…

The first thing you’ll notice (when comparing with the previous example) is that we’ve added a new container (notice that P is now wrapped into a DIV element). This new container will be attached to a new DataView control (notice the sys:attach attribute usage), which introduces its own template.

We’re taking advantage of contexts and we’re using the “current” contacts array for feeding items to the inner template (defined within the inner DataView control). Notice that each item in the contacts array is a string: from a practical point of view, that means that we’ll be printing the current contact through the $dataItem pseudo-column (instead of accessing one of its properties by name,like we did in all our previous samples).

And that’s it. More about ASP.NET AJAX in future posts.

Advertisements

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