Problema con Sys.UI.DataView y javascript

StackOverflow https://stackoverflow.com/questions/1469205

  •  16-09-2019
  •  | 
  •  

Pregunta

Estoy usando Microsoft Ajax para rellenar dinámicamente una lista de contactos, dado un paquete de JSON. Mi código es el siguiente: 

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

El HTML asociado es como sigue: 

<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 primera etiqueta se utiliza para disparar una secuencia de comandos para quitar el contacto, mientras que el segundo utiliza el cluetip jQuery para que aparezca un cuadro en vuelo estacionario (detalles omite aquí).

El problema que estoy teniendo es que el HTML no se procesa de forma correcta. Lo que se está generado es: 

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

El cuadro de alerta indica que los datos con una identificación válida (un GUID) y nombre ( "Darren Oster"). El nombre se procesa de forma correcta, pero el campo ID no se representa en el atributo 'rel', y la declaración 'onclick' se elimina por completo.

Es esto una limitación de MS Ajax o estoy haciendo algo mal?

Gracias de antemano.

¿Fue útil?

Solución

Si un atributo es contener ningún {{}} expresiones debe ser el valor completo.

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

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

En cuanto a onclick no se está generando, probablemente lo es, pero cualquiera que sea la inspección que está utilizando no le muestra el valor, ya que se establece con un juego directo del element.onclick, no addAttribute ().

Otros consejos

InfinitiesLoop me puso en el camino correcto, así que aquí está la respuesta final (en el caso de cualquier otra persona sigue este camino) ...

En primer lugar, yo estaba usando una vista previa anterior de MS Ajax 4.0. Ahora he actualizado a la vista previa 5, y las cosas funcionan de forma ligeramente diferente. Aquí está el final de HTML (el código JavaScript es sin cambios): 

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

También tenga en cuenta que la vista previa 5 requiere los '' sys: prefijo en los atributos que tienen valores enlazados a datos, de modo 

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

dentro de un

El contenido tiene licencia bajo Creative Commons.

Si encuentra violaciones de derechos de autor, puede contactarnos en info@generacodice.com Para solicitar la eliminación del contenido.

scroll top