Problema con Sys.Interfaccia utente.DataView e javascript

Question

Sto utilizzando Microsoft Ajax popolare dinamicamente una lista di contatti, dato un json pacchetto.Il mio codice è il seguente:

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

L'html associato è il seguente:

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

Il primo <a> tag è utilizzato per generare uno script per rimuovere il contatto, mentre il secondo utilizza jQuery cluetip per visualizzare una casella di hover (dettagli saltato qui).

Il problema che sto avendo è che il codice HTML non viene visualizzato correttamente.Ciò che viene generato è:

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

La finestra di avviso indica che i dati di un documento d'identità valido (Guid) e il Nome ("Darren Oster").Il Nome viene visualizzato correttamente, ma il campo ID non viene eseguito il rendering in il 'rel' attributo, e 'onclick' istruzione viene rimosso completamente.

Questa è una limitazione di MS Ajax o sto facendo qualcosa di sbagliato?

Grazie in anticipo.

Answer 1

Se un attributo è quello di contenere {{}} espressioni deve essere l'intero valore.

Sì: foo = "{{ 'abc' + ID}}"

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

Per quanto riguarda onclick non essere generato, probabilmente lo è, ma qualunque sia l'ispezione che si sta utilizzando non mostra il valore, dal momento che è impostato con una serie diretta di element.onclick, non AddAttribute ().

Answer 2

InfinitiesLoop mi ha messo sulla strada giusta, ecco quindi la risposta finale (in caso di chiunque altro segue questo percorso)...

Primo, io sto usando una prima anteprima di MS Ajax 4.0.Ora ho aggiornato alla preview 5, e le cose funzionano in modo leggermente diverso.Ecco il finale di HTML (il codice javascript è invariato):

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

Nota anche che l'anteprima di 5 la necessita 'sys:' prefisso in tutti gli attributi associati a dati valori, in modo che

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

all'interno di un <select> diventa

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