Actualizando HTML a través de JSON/AJAX

Question

He estado usando JSON para manejar la funcionalidad AJAX en mis aplicaciones de rieles desde que me enteré, porque el uso de RJS/HTML de renderizado "se sentía" mal porque violó a MVC. El primer proyecto pesado de AJAX en el que trabajé terminó con 20-30 acciones de controlador vinculadas directamente a comportamientos de UI específicos y mi código de vista se extendió por acciones de controlador, parciales y archivos rjs. El uso de JSON le permite mantener el código específico de la vista, y solo hablar para ver las acciones del controlador agnóstico/REST a través de AJAX para obtener los datos necesarios.

El único dolor de cabeza que he encontrado al usar JSON puro es que tienes que "renderizar" HTML a través de JS, que en el caso de AJAX que tiene que actualizar elementos DOM-heavy, puede ser un verdadero dolor. Termino con mucho código de construcción cadena como

// ...ajax 
success: function(records){ 
    $(records).each(function(record){ 
    var html = ('<div id="blah">' + record.attr + 
     etc + 
    ') 
    }) 
} 

donde etc es de 10-15 líneas de construir dinámicamente HTML basado en datos de registro. Además de la molestia, un enfoque más serio de este enfoque es la duplicación de la estructura HTML (en la plantilla y en el JS). * ¿Existe una mejor práctica para este enfoque?

(Mi motivación para finalmente llegar es que estoy ahora en la tarea con la actualización de HTML tan complejo que requiere dos bucles anidados de código Ruby para hacer en el primer lugar. Duplicación de que en JavaScript parece una locura.)

• Una cosa que he considerado es cargar archivos parciales estáticos directamente desde el sistema de archivos, pero esto parece un poco demasiado.

Answer 1

ocurrió que encontrar exactamente lo que estaba buscando: Jaml

Answer 2

Puede utilizar la función de carga en jQuery; Esto carga el contenido de una página en un div así:

$('#content').load("content/" + this.href.split('#')[1] + ".html", '', checkResponse); 

Simplemente haga una visión dinámica y que son buenos para ir ...

Answer 3

Me gustaría ir con la creación de una estructura HTML que contiene marcadores de posición para los elementos que necesitará actualizar a través de AJAX. La cantidad de estructura que aplica dependerá de lo que esté actualizando; si se conoce el número de elementos que tendrá antes de tiempo, sería algo en el sentido de

<div id="article1"> 
    <div id="article1Headline"></div> 
    <div id="article1Copy"></div> 
    <div id="article1AuthorInfo"></div> 
</div> 
<div id="article2"> 
    <div id="article2Headline"></div> 
    <div id="article2Copy"></div> 
    <div id="article2AuthorInfo"></div> 
</div> 

A continuación, escribe el código que hace referencia a la identificación de cada elemento directamente, y se inserta en la propiedad .innerHTML (o cualquier otra forma sintácticamente más azucarada que tiene Jquery de hacer lo mismo). En mi humilde opinión, no es tan terrible tener que asignar los contenidos de cada elemento, la parte que no desea tener que espolvorear a través de sus funciones AJAX es la propia estructura HTML; en su aplicación, el contenido es volátil de todos modos.

Sin embargo, parece que es posible que tenga una lista de un número indeterminado de elementos, en ese caso, puede ser que usted necesitaría sólo hay que poner en un marcador de posición:

<div id="articleList"></div> 

En ese caso, en realidad no ver una manera de evitar la construcción de la estructura HTML en las llamadas JavaScript, pero una cantidad razonable de descomposición de su Javascript debe ayudar a que:

function addArticle(headline, copy, authorInfo, i){ 
    createDiv("article" + i + "Headline", headline); 
    createDiv("article" + i + "Copy", copy); 
    createDiv("article" + i + "AuthorInfo", authorInfo); 
} 

(no código, por supuesto, de trabajo, pero usted consigue la idea ,)

Answer 4

Me gusta la idea de crear plantillas. En mi experiencia, ¡realmente puede limpiar esa desordenada manipulación de cuerdas!

hay muchas soluciones, por ejemplo, echa un vistazo a John Resig (creador de jQuery):

http://ejohn.org/blog/javascript-micro-templating/