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.
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.
Risposte:
Beh, ad essere sinceri, il template lato client è molto caldo oggigiorno, ma piuttosto una giungla.
i più popolari sono, credo:
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.
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 ...
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ò.
Plugin jQuery Templates creato da Microsoft e accettato come plugin jQuery ufficiale.
Ma nota che ora è deprecato.
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.
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.
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