Aggiornamento HTML tramite JSON/AJAX

Question

Ho usato JSON per gestire le funzionalità AJAX nelle mie applicazioni rails sin da quando ne ho sentito parlare, perché l'uso di RJS/rendering HTML "mi sembrava" sbagliato perché violava MVC. Il primo progetto AJAX-pesante a cui ho lavorato si è concluso con azioni del controller 20-30 legate direttamente a comportamenti specifici dell'interfaccia utente e il mio codice di visualizzazione si è esteso su azioni del controller, partial e file rjs. L'utilizzo di JSON consente di mantenere il codice specifico della vista nella vista e di parlare solo per visualizzare le azioni agnostiche/RESTful del controller tramite AJAX per ottenere i dati necessari.

L'unico mal di testa che ho trovato nell'utilizzare JSON puro è che devi "renderizzare" HTML tramite JS, che nel caso di AJAX che deve aggiornare gli elementi DOM-heavy, può essere un vero dolore. Io alla fine con regolamento edilizio stringa lunghi come

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

dove etc è di 10-15 righe di costruire dinamicamente HTML basata sui dati del record. Oltre al fastidio, un più serio richiamo a questo approccio è la duplicazione della struttura HTML (nel modello e nel JS). * Esiste una migliore pratica per questo approccio?

(La mia motivazione per raggiungere finalmente fuori è che sono ora affidato il compito di aggiornare l'HTML così complessa ha richiesto due cicli annidati di codice Ruby per rendere in primo luogo. Duplicazione che in Javascript sembra folle.)

• Una cosa che ho considerato è il caricamento di file parziali statici direttamente dal file system, ma questo sembra un po 'troppo.

Answer 1

è capitato di trovare esattamente quello che stavo cercando: Jaml

Answer 2

È possibile utilizzare la funzione di caricamento in jQuery; Questo carica il contenuto di una pagina in un div come questo:

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

Basta fare una visione dinamica e vi sono buone per andare ...

Answer 3

vorrei andare con la creazione di una struttura HTML che contiene i segnaposti per gli elementi che dovrai aggiornare tramite AJAX. Quanta struttura si applica dipenderà da cosa stai aggiornando; se si conosce il numero di elementi avrete prima del tempo, sarebbe qualcosa per l'effetto di

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

È quindi scrivere codice che fa riferimento l'id di ogni elemento direttamente, e gli inserti in proprietà .innerHTML (o qualsiasi altro modo sinteticamente più zuccheroso che jquery abbia di fare la stessa cosa). IMHO, non è proprio così terribile dover assegnare il contenuto di ogni elemento, la parte che non vuoi avere per cospargere le tue funzioni AJAX è la stessa struttura HTML; nella tua app il contenuto è comunque volatile.

Tuttavia, sembra che si potrebbe avere un elenco di un numero imprecisato di elementi, in questo caso può essere che si avrebbe bisogno di appena messo in un segnaposto:

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

In quel caso io non davvero non vedere un modo per evitare la costruzione della struttura HTML nelle chiamate javascript, ma una quantità ragionevole di decomposizione della vostra javascript che dovrebbe aiutare:

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

(non il codice ovviamente lavorare, ma si ottiene l'idea ,)

Answer 4

Mi piace l'idea del modello. Nella mia esperienza può davvero ripulire quella manipolazione di stringhe disordinata!

ci sono molte soluzioni, per esempio, controlla di John Resig (creatore di jQuery):

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