Пояснення <script type = "text / template">… </script>

456

Я просто натрапив на щось, чого раніше ніколи не бачив. У джерелі прикладу Backbone.js додаток TODO ( Приклад TODO Backbone ) вони мали свої шаблони всередині a <script type = "text/template"></script>, які містили код, схожий на щось із PHP, але з тегами JavaScript.

Може хтось мені це пояснить? Це законно?

javascript  templates  types  backbone.js  underscore.js 
— Метт
джерело
Відмінне запитання та відповідь. Я щойно натрапив на цю хитрість у новому рамочному
— mjhm
4
Що про те, type="text/tcl"що я бачив у документі W3C ? Як ним користуватися? (Чи варто задати інше запитання?)
— L01man
3
@ L01man так, вам слід задати інше питання.
— Нейт Гленн
Посилання YUI mjhm зараз за посиланням: yuilibrary.com/yui/docs/app/app-todo.html
— gpvos

Відповіді:

413

Ці теги сценаріїв є загальним способом реалізації функцій шаблонів (наприклад, у PHP), але на стороні клієнта.

Встановивши тип "текст / шаблон", браузер не може зрозуміти це сценарій, і тому браузер просто проігнорує його. Це дозволяє помістити туди що-небудь, що потім може бути вилучено пізніше і використане бібліотекою шаблонів для генерування фрагментів HTML.

Хребта не змушує вас використовувати якусь конкретну бібліотеку шаблонів - їх там досить багато: вуса , Хамл , Еко , шаблон закриття Google тощо, (той, що використовується у прикладі, до якого ви пов’язали, є underscore.js ). Вони використовуватимуть власний синтаксис для запису в теги сценаріїв.

— Девід Тан
джерело
22
@Matt, саме так. У той же час, повний текст знову легко отримати, використовуючи .innerHTML, отже, це звична практика серед двигунів-шаблонів.
— Девід Тан
1
Ну це не просто фантастична новина! Я шукав таке рішення .. Дякую за вашу відповідь та подальші дії!
— Мет
7
привіт, різний Метт тут. Чи буде <script type = "text / template"> пройти перевірку html-перевірки?
— Метт
17
З нетерпінням чекаємо <template />тегу. html5rocks.com/en/tutorials/webcomponents/template & caniuse.com/#search=template
— Фолькер Е.
5
Привіт від майбутнього. <template>є тут, але сайти все ще використовують цю техніку, наприклад reddit.com. : F
— Віктор Замонян
114

Це законно і дуже зручно!

Спробуйте це:

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

Кілька бібліотек шаблонів JavaScript використовують цю методику. Handlebars.js - хороший приклад.

— Ріміан
джерело
5
Як би ви зробили це сповіщення в необробленому javascript з jquery?
— тремор
3
@tremor Ви маєте на увазі в необробленому JavaScript без jquery? Щось на зразок: var el = document.getElementById ('привіт'); var html = el.textContent; попередження (html); (вам потрібно буде детальніше вивчити обробку тексту тегів сценарію в IE)
— SgtPooki
@SgtPooki ya я мав на увазі без, дякую за відповідь. Я дуже хотів би зробити src цей скрипт до зовнішнього файлу і отримати його, але я виявив, що це насправді неможливо .. тому я занурююся в AJAX і socket.io зараз.
— тремор
@tremor, я, можливо, не розумію, що ти намагаєшся робити, але динамічне захоплення зовнішніх файлів для запуску чи розбору як шаблон, безумовно, можливо. Перевірте Requjs.
— SgtPooki
@tremor Якщо ви хочете динамічно витягувати зовнішні файли, я б скоріше використовував XHR, ніж теги сценаріїв. XHR також працює з простими відповідями HTML ... або будь-що інше з цього питання.
— Jeroen Landheer
26

Встановивши typeінший тег скрипту text/javascript, браузер не буде виконувати внутрішній код тегу сценарію. Це називається мікро-шаблон. Ця концепція широко використовується в застосуванні для однієї сторінки (також SPA).

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

Для мікро-шаблону введіть тег сценарію text/template. Це дуже добре пояснює творець Jquery Джон Резиг http://ejohn.org/blog/javascript-micro-templating/

— Фізер Хан
джерело
Чудовий ресурс, який ви включили. Це посилання мене багато чому навчило.
— rocktheartsm4l
13

Щоб додати відповідь Box9:

Backbone.js залежить від underscore.js, який сам реалізує оригінальні мікротемпери Джона Резіга.

Якщо ви вирішили використовувати Backbone.js з Rails, не забудьте перевірити дорогоцінний камінь Jammit. Це забезпечує дуже чистий спосіб управління упаковкою активів для шаблонів. http://documentcloud.github.com/jammit/#jst

За замовчуванням Jammit також використовує мікротемператури JResig, але він також дозволяє замінити двигун шаблонів.

— Ендрю Де Андраде
джерело
Додамо, DocumentCloud, що забезпечує Jammit, - та сама компанія, яка розробила Backbone та Underscore.
— Ceasar Bautista
12

Це спосіб додавання тексту до HTML без його рендерингу та нормалізації.

Це не що інше, як додати його так:

 <textarea style="display:none"><span>{{name}}</span></textarea>
— Кернель Джеймс
джерело
32
Інакше, textarea все одно буде вставляти ці елементи в DOM і отримувати будь-які запитувані зовнішні активи (наприклад, зображення). Тег сценарію не буде.
— LocalPCGuy
13
@LocalPCGuy це неправда, в тому числі <img src="image.jpg">всередині текстової області не призведе до перегляду браузера image.jpg, браузер знає, що вміст всередині текстової області не повинен відображатися.
— vikki
5
@vikki woops, ви праві, textarea може бути одним з небагатьох елементів, який стане життєздатною заміною шаблону тегів сценарію.
— LocalPCGuy
4
@LocalPCGuy так, я думаю, що ці два можна використовувати взаємозамінно. Якщо у вашого шаблону є рядок, </script>ви не можете використовувати його всередині тегу сценарію, тож ви можете використовувати textarea, і навпаки.
— вікі
2
Так ... Перш ніж тег шаблону і перед типом сценарію = текст / шаблон, я вважаю, що ми все це робили з textarea. Це те ж саме з iframes, коли у нас не було аяксу.
— dkellner
11

<script type = “text/template”> … </script>застаріла. Використовуйте <template>замість тегу.

— Reza Salarmehr
джерело
9
<template>тег досі не підтримується Internet Explorer станом на IE 11.
— ovinophile
87
Через 5 років використовуйте тег <template>.
— суперлюмінація
13
<script type = "text / template"> може вмістити що завгодно, вони не розбираються. З іншого боку, теги <template> аналізуються на DOM, отже, має бути дійсним HTML. Зазвичай це означає, що перший буде зберігатися як неушкоджений шаблон, а другий позбавить невідповідних HTML-частин та зламає шаблон. ... звичайно, проблема лише в тому випадку, якщо ви використовуєте шаблонні двигуни, такі як вуса чи подібні.
— dagnelies
10
НЕ використовуйте тег <template> і не приймайте рішення на основі того, що щось інше є "застарілим". Це не Міланський тиждень моди, якщо щось працює і технічно підходить, його можна використовувати :) Тепер для справжнього: тег <template> все ще не підтримується в IE і Opera Mini (згідно CanIUse), і тег <script> буде тримайте саме те, що ви надаєте, на відміну від прихованого div або будь-якого іншого тегу, який може втратити ваші пробіли чи коментарі.
— dkellner
3
Через 2 роки з моменту отримання відповіді, IE11 сама по собі застаріла технологія, і Microsoft замість цього перейшла до Edge, яка підтримує <template>. Більшість основних браузерів настільних ПК підтримує цей <template>тег. Я настійно рекомендую використовувати його відтепер. developer.mozilla.org/uk/docs/Web/HTML/Element/…
— Yeo
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.