Domanda Libreria JavaScript modello JavaScript consigliata per JQuery? [chiuso]


Qualche suggerimento su quale libreria di template HTML andrebbe bene con JQuery? Googling produce un numero elevato di librerie, ma non sono sicuro che esista una libreria ben riconosciuta in grado di resistere alla prova del tempo.


89
2018-01-16 07:48


origine


risposte:


Bene, per essere sinceri, i templi client-side sono molto caldi al giorno d'oggi, ma piuttosto una giungla.

i più popolari sono, credo:

  • puro: Usa solo js, ​​non i suoi "sintassi"
  • baffi: abbastanza stabile e carino sentito.
  • jqote2: estremamente veloce secondo jsperfs
  • modelli jquery (deprecati):

ci sono abbondanza altri, ma devi metterli alla prova per vedere cosa ti sta meglio, e il tuo stile di progetto, meglio.

Personalmente, ho difficoltà ad aggiungere una nuova sintassi e un insieme di logiche (miscelazione logica e template, ciao ??), e andò puro js. Ogni singolo modello è memorizzato nel proprio file html (./usersTable.row.html). Uso i modelli solo quando elaboro contenuti 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 richiedeva più tempo per stabilizzarmi rispetto a farlo in modo "vecchio". La logica nel modello è un assoluto non senso a mio avviso, e l'aggiunta della propria sintassi aggiunge solo bug molto difficili da tracciare.


58
2017-11-19 13:00



jTemplates

un motore di template per JavaScript.

Collegarlo jQuery...

Caratteristiche:

  • 100% in JavaScript
  • precompilator
  • Supporta JSON
  • Lavora con Ajax
  • Consentire di utilizzare il codice JavaScript all'interno del modello
  • Consentire di creare modelli a cascata
  • Permetti di definire i parametri nei template
  • Live Aggiorna! - contenuto di aggiornamento automatico dal server ...

14
2018-01-16 07:55



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


8
2018-01-16 07:54



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

Ma nota che ora è deprecato.


5
2018-01-19 22:36



Vorrei controllare json2html, rinuncia a scrivere snippet HTML e si affida invece alle trasformazioni JSON per convertire gli array di oggetti JSON in liste non strutturate. Molto veloce e utilizza la creazione DOM.


4
2017-12-29 07:18



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

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

o

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

Inoltre, ora puoi inserire tutti i marcatori "data: propName" in class = "data: propName altri nomi di classi", in modo da non dover sparpagliare il contenuto della tua applicazione con quei marcatori.

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

Per gli scettici di questa domanda:

Quando Microsoft ha inventato con IE5 quello che ora conosciamo come XmlHttpRequest e il pattern "ajax", parte della promessa di questo era di scambiare dati tra un browser web e il server. Questi 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 call-back, il componente MSXML ActiveX di MS supportava anche un'implementazione preliminare di ciò che ora conosciamo come XSL-T e XPath.

Combinando il recupero di HTTP / XML, XPath e XSL-T, gli sviluppatori hanno offerto agli sviluppatori un'enorme creatività per creare ricchi "documenti" che si comportavano come "applicazioni", inviando semplicemente e, soprattutto, recuperando i dati dal server.

Perché questo è uno schema utile? Dipende dalla complessità dell'interfaccia utente e da quanto ti preoccupi della sua manutenibilità.

Quando costruisci un'interfaccia semanticamente marcata visivamente molto ricca con CSS avanzato, l'ultima cosa che vuoi fare è frammentare i 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 html / css avanzata è preservarne la convalida almeno durante la sua fase attiva di sviluppo. Se il tuo markup è valido, puoi concentrarti sui tuoi errori CSS. Ora, se frammenti di markup end-up vengono iniettati durante le varie fasi di interazione dell'utente, tutto diventa molto ingombrante da gestire e tutto diventa fragile.

L'idea era di avere tutti i costrutti dell'interfaccia utente di markup in un singolo documento, recuperare SOLO DATI attraverso la rete, e utilizzare una solida struttura che per lo meno semplicemente iniettare i dati nei costrutti di markup e nei costrutti di markup più replicati contrassegnati come ripetibili.

Questo è stato possibile con XSL-T e XPath in IE5 +, ma praticamente nessun altro browser. Alcuni framework per browser F / OSS sono stati dilettevoli con XPath ma non è ancora qualcosa su cui possiamo fare affidamento.

Quindi qual è la prossima cosa migliore per ottenere tale modello? IBDOM. Ottieni dati dal tuo server, inseriscilo nel tuo documento. senza sforzo.


3
2018-03-25 22:37



Dovresti dare un'occhiata ai template di Javascript, questo è un piccolo motore di template usato 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 fatta di Sebastian, giusto rimuovere questa linea

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

Sostituiscilo con questo

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

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

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

Godere


2