Libreria di modelli HTML JavaScript consigliata per JQuery? [chiuso]


89

Qualche suggerimento su quale libreria di modelli HTML andrebbe bene con JQuery? Su Google vengono visualizzate numerose biblioteche, ma non sono sicuro che esista una libreria ben riconosciuta che resista alla prova del tempo.


21
Supponiamo che tu riporti un oggetto JSON con 100 record. Ogni record deve generare lo stesso frammento html. È semplicemente utile utilizzare un modello piuttosto che generare il markup in js. Consente a un designer di progettarlo anche piuttosto che il markup di essere all'interno di una stringa in una funzione js
redsquare

3
@cletus - perché è più facile usare un modello in formato html che una catena di append
Andrey

2
Usa questo confronto delle prestazioni
AM

Risposte:


58

Beh, ad essere sinceri, il template lato client è molto caldo oggigiorno, ma piuttosto una giungla.

i più popolari sono, credo:

  • puro : usa solo js, ​​non la sua "sintassi"
  • baffi : abbastanza stabili e belli ho sentito.
  • jqote2 : estremamente veloce secondo jsperfs
  • modelli jquery (obsoleto):

ce ne sono molti altri, ma devi testarli per vedere cosa si adatta meglio a te e al tuo stile di progetto.

Personalmente, ho difficoltà ad aggiungere una nuova sintassi e un insieme di logica ( mescolare logica e modello, ciao ?? ), e sono andato puro js. Ognuno dei miei modelli è memorizzato nel proprio file html (./usersTable.row.html). Uso i modelli solo quando eseguo l'ajax del contenuto e ho pochi file js "logici", uno per le tabelle, uno per div, uno per le liste. e nemmeno uno per le opzioni di selezione (dove uso un altro metodo).

Ogni volta che ho provato a fare qualcosa di più complesso, ho scoperto che il codice era meno chiaro e mi ci voleva più tempo per stabilizzarlo rispetto a farlo alla "vecchia" maniera. La logica nel modello è un'assoluta mancanza di senso secondo me, e l'aggiunta della propria sintassi aggiunge solo bug molto difficili da rintracciare.


14

jTemplates

un motore di modelli per JavaScript.

Plugin per jQuery ...

Caratteristiche:

  • 100% in JavaScript
  • precompilatore
  • Supporta JSON
  • Lavora con Ajax
  • Consenti di utilizzare il codice JavaScript all'interno del modello
  • Consenti di creare modelli a cascata
  • Consente di definire i parametri nei modelli
  • Aggiorna in tempo reale! - aggiornamento automatico del contenuto dal server ...

8

C'è un ragionevole documento di discussione su questo argomento qui , che copre una gamma di strumenti per la creazione di modelli. Non specifico per jQuery, però.


5

Plugin jQuery Templates creato da Microsoft e accettato come plugin jQuery ufficiale.

Ma nota che ora è deprecato.


13
e "deprecato" da allora. Lo sviluppo è stato interrotto e non uscirà dalla versione beta. un ragazzo ms, e il team di jquery-ui stanno lavorando a un nuovo modello, basato su JSRender tu;)
roselan

Huh, bummer - Lo sto usando in tutta la mia app web :( Grazie per il suggerimento però! Hai un link sul prossimo motore di template che hai menzionato?
Andrey

1
se tutto va bene, jsrender di boris moore lo troverà in jquery-ui. Non c'è bisogno di sbrigarsi immagino;)
roselan

1
Ho implementato jsRender in un progetto ed è semplicemente fantastico. Vale la pena dare un'occhiata.
ASeale

4

Vorrei controllare json2html , rinuncia a scrivere snippet HTML e si basa invece sulle trasformazioni JSON per convertire gli array di oggetti JSON in elenchi non strutturati. Molto veloce e utilizza la creazione DOM.


4
disclaimer .. ho scritto questo. Ma vale la pena dare un'occhiata;)
Chad Brown

3

Un paio di anni fa ho creato IBDOM: http://ibdom.sf.net/ | A partire da dicembre 2009, supporta l'associazione jQuery se lo si ottiene direttamente dal trunk.

$("#foo").injectWith(collectionOfJavaScriptObjects);

o

$("#foo").injectWith(simpleJavaScriptObject);

Inoltre, ora puoi mettere tutti i marcatori "data: propName" negli attributi class = "data: propName altri nomi di classe", così non devi sporcare il contenuto della tua applicazione con quei marcatori.

Devo ancora aggiornare un po 'della documentazione per riflettere i miei recenti miglioramenti, ma ho varie versioni di questo framework in produzione dal 2007.

Agli scettici di questa domanda:

Ai tempi in cui Microsoft inventò con IE5 quello che ora conosciamo come XmlHttpRequest e il pattern "ajax", parte della promessa dietro a questo era di scambiare puramente dati tra un browser web e il server. Quei dati dovevano essere incapsulati in XML, perché nel 1999/2000, XML era semplicemente così caldo. Oltre a recuperare un documento xml sulla rete con un meccanismo di richiamata, il componente MSXML ActiveX di MS supportava anche un'implementazione pre-bozza di ciò che ora conosciamo come XSL-T e XPath.

La combinazione del recupero di HTTP / XML, XPath e XSL-T, ha offerto agli sviluppatori una straordinaria creatività per creare ricchi "documenti" che si comportavano come "applicazioni", puramente inviando e, cosa più importante, recuperando dati dal server.

Perché questo è un modello utile? Dipende da quanto è complessa la tua interfaccia utente e da quanto tieni alla sua manutenibilità.

Quando costruisci un'interfaccia con marcatura semantica visivamente molto ricca con CSS avanzato, l'ultima cosa che vuoi fare è tagliare pezzi di markup in "mini-controller / viste", solo così puoi .innerHTML un frammento di documento nel principale documento, ed ecco perché.

Un principio fondamentale per mantenere gestibile un'interfaccia utente avanzata html / css è preservarne la convalida almeno durante la fase attiva di sviluppo. Se il tuo markup è convalidato, puoi concentrarti sui tuoi bug CSS. Ora, se frammenti di markup finiscono per essere iniettati durante le varie fasi dell'interazione con l'utente, diventa tutto molto ingombrante da gestire e l'intera faccenda diventa fragile.

L'idea era di avere tutti i costrutti dell'interfaccia utente di markup in un unico documento, recuperare SOLO DATI sulla rete e utilizzare un framework solido che per lo meno inietterà semplicemente i tuoi dati nei tuoi costrutti di markup e al massimo replicherà i costrutti di markup che hai contrassegnato come ripetibile.

Questo era possibile con XSL-T e XPath in IE5 +, ma praticamente senza altri browser. Alcuni framework di browser F / OSS si sono dilettati con XPath, ma non è ancora qualcosa su cui possiamo fare affidamento.

Allora qual è la prossima cosa migliore per ottenere tale schema? IBDOM. Ottieni dati dal tuo server, inseriscili nel tuo documento. senza sforzo.


un'altra cosa: IBDOM utilizza metodi DOM puri al 100% e zero innerHTML.
Chris Holland,

un'altra nota: IBDOM implementa ciò che io chiamo "forkedLoopExecution" che è un componente utilizzato internamente e qualcosa che è utilizzabile da solo. Ecco il problema: supponiamo che tu stia modificando il DOM tramite createElement e appendChild, in una sorta di costrutto a ciclo che deve superare una serie abbastanza ampia di oggetti big data: la maggior parte dei browser non "ridipingerà" l'interfaccia utente, fino a quando il codice che influenza il DOM "restituisce". In un "ciclo for" di grandi dimensioni con molti dati, i nostri risultati di ricerca potrebbero richiedere da mezzo secondo a un paio di secondi prima di visualizzare l'intera cosa in un blocco.
Chris Holland,

la soluzione: l'esecuzione del ciclo biforcuto sfrutta l'esecuzione ricorsiva indotta da setTimeout per tutta la durata della raccolta di dati passati ripetutamente per essenzialmente "restituire e ridipingere" ad ogni iterazione del ciclo, dandoti questa sensazione di rendering istantaneo: "dare all'utente qualcosa da guardare -A destra dannatamente ora ".
Chris Holland,

2

Dovresti dare un'occhiata a Javascript-Templates, questo è un piccolo motore di template utilizzato all'interno del famoso plugin di caricamento file jQuery e sviluppato dallo stesso autore, Sebastian Tschan (@blueimp)

https://github.com/blueimp/JavaScript-Templates

Segui la guida all'uso realizzata da Sebastian, rimuovi questa riga

document.getElementById("result").innerHTML = tmpl("tmpl-demo", data);

Sostituiscilo con questo

$('#result').html(tmpl('tmpl-demo', data));

Non dimenticare di aggiungere anche il tag del risultato div nel tuo file HTML

<div id="result"></div>

Godere

Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.