Problème avec Sys.UI.DataView et javascript

Question

J'utilise Microsoft Ajax pour remplir dynamiquement une liste de contacts, à partir d'un paquet json. Mon code est le suivant:

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')); 
} 

Le code HTML associé est la suivante:

<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> 

La première < une étiquette > est utilisé pour déclencher un script pour supprimer le contact, tandis que le second utilise le jQuery Cluetip pour élever une boîte sur le vol stationnaire (les détails ont sauté ici).

Le problème que j'ai est que le HTML n'est pas rendu correctement. Ce qui est généré est:

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

La zone d'alerte indique que les données avec carte d'identité valide (Guid) et le nom (« Darren Oster »). Le nom est rendu correctement, mais le champ ID n'est pas rendu dans l'attribut 'rel' et l'instruction 'onclick' est entièrement supprimée.

Est-ce une limitation de MS Ajax ou est-ce que je fais quelque chose de mal?

Merci d'avance.

Answer 1

Si un attribut doit contenir des {{}} expressions, il doit s'agir de la valeur entière.

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

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

En ce qui concerne onclick pas généré, il probablement est, mais quelle que soit l'inspection que vous utilisez ne vous montre pas la valeur, car il est défini avec un ensemble direct de element.onclick, pas addAttribute().

Answer 2

InfinitiesLoop m'a mis sur la bonne voie, voici donc la réponse finale (tout le monde en cas d'autre suit ce chemin) ...

D'abord, j'utilisais un aperçu antérieure de MS Ajax 4.0. J'ai maintenant mis à jour pour prévisualiser 5, et les choses fonctionnent légèrement différemment. Voici le code HTML final (le javascript est inchangé):

<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> 

Notez également que prévisualisation 5 nécessite le « sys: » préfixe sur tous les attributs qui ont des valeurs liées aux données, afin

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

dans un < sélectionner > devient

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