Problem with Sys.UI.DataView and javascript

Question

I'm using Microsoft Ajax to dynamically populate a list of contacts, given a json packet. My code is as follows:

function fillContactsFromData(contacts) {
    // this is just for debug to let me know that the data is correct
    if (contacts.length > 0) {
        alert('ID: ' + contacts[0].ID + ', Name: ' + contacts[0].Name);
    }

    $create(Sys.UI.DataView, { data: contacts }, null, null, $get('contacts'));
}

The associated html is as follows:

<div id="contacts" class="sys-template">
    <a onclick="removeContact('{{ ID }}');"><img src="remove.png" /></a>
    <a class="contact" rel="/Contacts/Index/{{ ID }}">{{ Name }}</a><br />
</div>

The first <a> tag is used to fire a script to remove the contact, while the second uses the jQuery cluetip to bring up a box on hover (details skipped here).

The problem I am having is that the HTML is not being rendered correctly. What is being generated is:

<div id="contacts">
    <a><img src="remove.png" /></a>
    <a class="contact" rel="/Contacts/Index/{{ ID }}">Darren Oster</a><br />
</div>

The alert box indicates data with valid ID (a Guid) and Name ("Darren Oster"). The Name is being rendered correctly, but the ID field is not rendered in the 'rel' attribute, and the 'onclick' statement is removed entirely.

Is this a limitation of MS Ajax or am I doing something incorrectly?

Thanks in advance.

Answer 1

If an attribute is to contain any {{ }} expressions it must be the entire value.

Yes: foo="{{ 'abc' + ID }}"

No: foo="abc{{ ID }}"

As for onclick not being generated, it probably is, but whatever inspection you are using doesn't show you the value, since it is set with a direct set of element.onclick, not addAttribute().

Answer 2

InfinitiesLoop put me on the right track, so here's the final answer (in case anyone else follows this path)...

First, I was using an earlier preview of MS Ajax 4.0. I've now updated to preview 5, and things work slightly differently. Here's the final HTML (the javascript is unchanged):

<div id="contacts" class="sys-template">
    <a sys:onclick="{{ 'removeContact(\'' + ID + '\');' }}"><img src="remove.png" /></a>
    <a class="contact" sys:rel="{{ '/Contacts/Index/' + ID }}">{{ Name }}</a><br />
</div>

Also note that preview 5 requires the 'sys:' prefix on any attributes that have data-bound values, so

<option value="{{ Value }}">{{ Text }}</option>

inside a <select> becomes

<option sys:value="{{ Value }}">{{ Text }}</option>