Spiegazione di <script type = “text/modello”> … </script>

Ho appena inciampato su qualcosa che non ho mai visto prima. La fonte di Backbone.js esempio di applicazione di TODO (Spina dorsale TODO Esempio) hanno avuto i loro modelli all’interno di un <script type = "text/template"></script>, che conteneva un codice che appare come qualcosa di PHP, ma con i tag JavaScript.

Qualcuno può spiegare questo a me? Questo è legit?

InformationsquelleAutor Matt | 2011-02-06

 

7 Replies
  1. 397

    Coloro i tag script sono un modo comune per implementare i template di funzionalità (come in PHP), ma sul lato client.

    Impostando il tipo di “testo/modello”, non è uno script che il browser è in grado di capire, e il browser sarà semplicemente ignorarlo. Questo permette di inserire nulla, e che quindi possono essere estratti in seguito e utilizzato da una libreria di template per generare il codice HTML snippet.

    Spina dorsale, non ti costringono ad utilizzare un particolare libreria di template – ci sono alcuni là fuori: Baffi, Haml, Eco,Google Chiusura modello, e così via (quello usato nell’esempio è collegato è underscore.js). Questi utilizzano il loro proprio sintassi per la scrittura all’interno di tali tag script.

    • esattamente che. Allo stesso tempo, è facile recuperare il testo completo nuovo utilizzando .innerHTML, quindi è una pratica comune tra i motori di template.
    • Beh, non è proprio una notizia fantastica! Sto cercando una soluzione di questo tipo.. Grazie per la tua risposta e per il follow-up!
    • ciao, diversi Matt qui. Vorresti <script type=”text/modello”> passare un html di prova per la verifica?
    • nevermind, ho trovato su icanhazjs.com che è valido
    • non funziona quando c’è </script> il testo all’interno del testo/modello
    • FYI, “testo/modello” non è un valido tipo di supporto secondo la IANA iana.org/assignments/media-types/text
    • Guardando in avanti per <template /> tag. html5rocks.com/en/tutorials/webcomponents/template & caniuse.com/#search=template
    • Il modello deve essere in linea all’interno del HTML; non è possibile accedere al contenuto di uno script collegato con il src attributo. stackoverflow.com/questions/12035839/…
    • Ciao dal futuro. <template> è qui, ma i siti non sono ancora utilizzando questa tecnica, come reddit.com. :F

  2. 111

    È legit e molto utile!

    Provare questo:

    <script id="hello" type="text/template">
      Hello world
    </script>
    <script>
      alert($('#hello').html());
    </script>

    Diversi Javascript templating librerie di utilizzare questa tecnica. Handlebars.js è un buon esempio.

    • Come si potrebbe fare questo avviso in raw javascript con jquery?
    • Intendi in raw javascript senza jquery? Qualcosa di simile a: var el = document.getElementById(‘ciao’); var html = el.textContent; alert(html); (avrete bisogno di guardare al di là script di elaborazione tag ” testo in IE)
    • ya intendevo senza, grazie per la risposta. Quello che mi piacerebbe fare è src che script in un file esterno e farlo, ma ho scoperto che non è proprio possibile.. quindi sto immersioni in AJAX e presa.io ora.
    • Forse non ho capito esattamente che cosa stai cercando di fare, ma afferrando un file esterno, in modo dinamico, per eseguire o analizzare come modello, è sicuramente possibile. Check out requirejs.
    • Se si desidera estrarre un file esterno, in modo dinamico, preferisco utilizzare XHR di tag di script. XHR funziona anche con il semplice HTML risposte… o qualsiasi altra cosa per quella materia.
    • Oh la mia parola, ho cercato per questo.

  3. 25

    Impostando tag script type diverso text/javascript, il browser non esegue il codice interno del tag script. Questo è chiamato micro modello. Questo concetto è ampiamente usato in pagina Singola applicazione(aka SPA).

    <script type="text/template">I am a Micro template. 
      I am going to make your web page faster.</script>

    Per le micro, modello, tipo di tag script è text/template. È spiegato molto bene in Jquery creatore John Resig http://ejohn.org/blog/javascript-micro-templating/

    • Grande risorsa che è incluso. Quel link mi ha insegnato molto.
  4. 13

    Per aggiungere Box9 risposta:

    Backbone.js dipende underscore.js il quale implementa John Resig originale microtemplates.

    Se si decide di utilizzare Backbone.js con Rails, essere sicuri di controllare il Jammit gemma. Esso fornisce un modo molto pulito per gestire attività di packaging per i modelli.
    http://documentcloud.github.com/jammit/#jst

    Per impostazione predefinita Jammit utilizza anche JResig del microtemplates, ma permette anche di sostituire il motore di template.

    • Per aggiungere, DocumentCloud, che fornisce Jammit, è la stessa società che ha sviluppato spina Dorsale e il carattere di Sottolineatura.
  5. 12

    È un modo di aggiungere testo in HTML senza che si sia reso o normalizzata.

    È niente di diverso da aggiungere come:

     <textarea style="display:none"><span>{{name}}</span></textarea>
    • È diverso, una textarea ancora inserire questi elementi nel DOM e recuperare eventuali risorse esterne (come le immagini) richiesto. Un tag script non.
    • questo non è vero, tra <img src="image.jpg"> all’interno di una textarea non causare il browser per recuperare image.jpg, il browser sa che il contenuto all’interno di una textarea non è pensato per essere eseguito il rendering.
    • oops, hai ragione, la textarea potrebbe essere uno dei pochi elementi che possono essere una valida sostituzione per il tag script di templating.
    • sì, penso che quei due possono essere utilizzati interchangebly. Se il tuo modello ha la linea </script> non è possibile utilizzare all’interno di un tag script, in modo che è possibile utilizzare il componente textarea quindi, e viceversa.
    • Yup… Prima di tag del modello, e prima di script type=text/modello, tutti abbiamo fatto con textarea, credo. È la stessa cosa con iframe quando abbiamo avuto l’ajax.
  6. 10

    <script type = “text/template”> … </script> è obsoleto. Utilizzare <template> tag invece.

    • <template> tag ancora non è supportato da Internet Explorer (IE 11.
    • In 5 anni di tempo, utilizzare il <modello> tag.
    • <script type = “text/modello”> può contenere qualunque cosa, non vengono analizzati. D’altra parte, <modello> tag sono analizzati in un DOM, quindi ha bisogno di un codice HTML valido. Di solito, questo significa che la prima sarà mantenuto intatto come modello, mentre la seconda striscia non-html-compatibile parti e rompere il modello. …certo, è un problema solo se si utilizza il modello motori di ricerca, come i baffi o simili.
    • Questa è una parte di componenti web e possiamo già utilizzare con polimero in tutti i browser, o in modo nativo con alcuni browser.
    • se si utilizza webcomponents.js tag modello funziona in tutti i browser che potrebbe essere necessario supporto dal IE8 non è supportato anche da Microsoft github.com/webcomponents/webcomponentsjs
    • NON usare <modello> tag, e non prendere la vostra decisione basata su qualcosa di diverso, di essere “obsoleti”. Questa non è la Settimana della Moda di Milano, se qualcosa funziona e tecnicamente appropriata, può essere utilizzato 🙂 Ora per il real: <modello> tag è ancora supportato in IE e Opera Mini (secondo CanIUse), e <script> tag terrà esattamente ciò che si dà, rispetto a un div nascosto o qualsiasi altro tag che potrebbero perdere i tuoi spazi o commenti.
    • 2 anni visto che la risposta inviato, IE11 di per sé è una tecnologia obsoleta, e Microsoft è in ha di muoversi a Bordo, invece, che il supporto <template>. La maggior parte dei principali browser desktop supporta questa <template> tag. Mi consiglia di utilizzare, per ora. developer.mozilla.org/en/docs/Web/HTML/Element/…
    • se si desidera utilizzare il tag del modello, è possibile creare tag per browser diversi da IE: html <script type="text/javascript"> var isIE = !!window.ActiveXObject; if(isIE){ document.createElement("template"); } </script>

Lascia un commento