HTML-шаблоны в Javascript? Без кодирования на странице?
Я веб-парень, делающий в основном Perl серверные вещи, и я медленно прихожу к нескольким выводам.
- Намного лучше сделать большую часть вашего кода с помощью Javascript и бросить данные взад и вперед через AJAX, а не удалять submit и перезагружать страницу с большей идентичностью.
- Мне нравится jQuery, потому что мне нравится CSS, и мне интересно объединить большие длинные и страшные определения других.
- Есть что-то для этого шаблонов.
Вы хотите, чтобы ваши HTML-элементы выглядели как ваши HTML-элементы, и это проще определить в HTML:
<div class="sidebar_elem">
<a href=""> TEXT</a>
</div>
Вместо того, чтобы копировать то же самое в Javascript или jQuery:
( '<div/>' )
.attr('id' , 'sidebar_elem' + i )
.addclass( 'sidebar_elem' )
;
( '<a/>' )
.attr('href' , link_url )
.appendTo( '#sidebar_elem' + i )
;
Это означает, что я больше не шаблонный агностик, но я не знаю, какой шаблонный инструмент, чтобы верить. Я заглянул в некоторые плагины шаблонов, основанные на jQuery, но я еще не доволен любым из их, отчасти потому, что те, которые я видел, похоже, хотят поместить весь этот код в саму страницу, что нарушает "Только разметка идет в файлы HTML, только стиль переходит в файлы CSS, только код переходит в файлы JS" мантры Я продолжаю читать.
Итак, я ищу инструмент для шаблонов на основе Javascript, который позволил бы мне иметь мои шаблоны во внешнем файле, чтобы у меня было одно изменение шаблона, охватывающее ряд веб-страниц. Если это основано на jQuery, это здорово, меньше всего мне нужно учиться, но это не развязка.
Ответы
Ответ 1
Как насчет EJS?
Пример со своей страницы:
"EJS объединяет данные и шаблон для создания HTML.
Данные:
{title: 'Cleaning Supplies', supplies: ['mop', 'broom', 'duster'] }
Шаблон:
<ul>
<% for(var i=0; i<supplies.length; i++) {%>
<li><%= supplies[i] %></li>
<% } %>
</ul>
Результат:
Ответ 2
Есть несколько хороших:
Mustache.js
Pure.js
Json Template
Если вам нужна версия jQuery, Tempest выглядит хорошо.
Ответ 3
2 библиотеки, которые я знаю, которые не смешивают кодировку с HTML-разметками, chain.js и PURE
chain
выполняет только манипуляции с DOM.
PURE
использует комбинацию DOM и innerHTML
, поскольку только DOM может медленно обрабатывать большие шаблоны.
Я являюсь основным вкладчиком PURE, и мы создали его для создания веб-приложения в описываемой вами модели ajax.
Ответ 4
Взгляните на этот http://ejohn.org/blog/javascript-micro-templating/. Созданный Джоном Ресигом, создателем jQuery, этому человеку даже не нужен jQuery, и он чертовски мал. Он также хранит шаблоны в теге script (ответ Даниила). Пример шаблона:
<script type="text/html" id="user_tmpl">
<% for ( var i = 0; i < users.length; i++ ) { %>
<li><a href="<%=users[i].url%>"><%=users[i].name%></a></li>
<% } %>
</script>
Возможно, вы можете загрузить их с помощью атрибута src, если вам действительно нужно, чтобы они были в отдельных файлах, что, по моему мнению, не является мудрой идеей, потому что это означает, что на сервер нужно дополнительное обращение. Поэтому в конце, ради оптимизации, вы можете хранить их в отдельных файлах, но вставлять их на стороне сервера на нужную им страницу.
Ответ 5
Поскольку нет четко определенного API и лучшей библиотеки для шаблонов, я бы предложил вам выбрать тот, который активно развивается. Ниже я кратко объяснил две библиотеки, которые активно разрабатываются.
Команда Команда jQuery решила, что шаблоны jQuery больше не будут активно развиваться или поддерживаться, поэтому я настоятельно рекомендую НЕ использовать его. Смотрите эту запись в блоге.
Вы можете использовать JsRender в соответствии с JsViews, чтобы получить полную функциональность, предоставляемую шаблонами jQuery, и даже больше похоже на привязку данных. Вы можете найти демонстрации для JsRender и JsViews, Я бы предложил использовать эти библиотеки, так как они активно разрабатываются командой jQuery UI, но имейте в виду, что они до сих пор не бета!
Усы - это еще одно решение для шаблонов, которое активно разрабатывается и упрощает шаблоны, комбинируя условные теги и теги перечисления. Он также предоставляет сильные функции, такие как инвертированные разделы, частичные части и секции высокого порядка с простым синтаксисом. Усы также являются одним из самых быстрых решений для шаблонов Смотрите блог Брайана Ландау. Я лично считаю усы хорошим шаблоном, поскольку он имеет простой синтаксис и хорошо работает.
Ответ 6
Вы должны проверить шаблон закрытия Google. Он полностью независим, поэтому вы можете использовать его с любым желаемым lib. Это шаблонный инструмент, написанный в java.
http://code.google.com/closure/templates/docs/helloworld_js.html
Он позволяет вам создавать шаблон на сервере, запускать на нем java-компилятор, а выход - это функция javascript, которая принимает json в качестве параметра.
{namespace examples}
/**
* Greets a person using "Hello" by default.
* @param name The name of the person.
* @param? greetingWord Optional greeting word to use instead of "Hello".
*/
{template .helloName}
{if not $greetingWord}
Hello {$name}!
{else}
{$greetingWord} {$name}!
{/if}
{/template}
Это создаст функцию, называемую example.helloName, которую можно вызвать как
Их формат очень дружественный IDE, я получаю подсветку синтаксиса HTML при редактировании шаблонов
examples.helloName({name: 'Ana', greetingWord:"Howdy"});
Вы можете вызывать другие шаблоны из шаблонов, автоматически html удаляет ваши данные (если вы не скажете об этом не), обеспечивает поддержку двунаправленного текста.
Еще одна замечательная вещь заключается в том, что инструмент шаблонов также может генерировать Java-код. Поэтому кто-то, кто пишет приложение, которое должно поддерживать браузеры с отключенным сценарием, может при необходимости генерировать HTML-код на сервере.
И последнее, но не менее важное: в отличие от других js templating systems() шаблон анализируется на сервере, поэтому стороне клиента требуется только слияние шаблона и данных, разбор шаблона выполняется как сборка шаг на сервере.
http://dev.sencha.com/deploy/dev/docs/?class=Ext.XTemplate является примером инструментария шаблонов, который полностью работает на клиенте. Есть две проблемы с этим подходом, разбор шаблона выполняется на клиенте, и ваш html должен быть встроен в строку javascript. Однако некоторые IDE (Intellij) будут выделять HTML внутри строк JS).
Ответ 7
Как насчет кода JAML?
http://github.com/edspencer/jaml
Как и некоторые из вышеперечисленных, но я считаю, что это более логично...
Это концепция определения ваших шаблонов через JSON/JavaScript, а затем использование функции в JavaScript для передачи аргументов вашему шаблону, который получает его визуализацию и возвращает его как элемент.
Существуют версии для различных существующих JavaScript-фреймворков.
Ответ 8
Используйте блок script
.
<script id="someId" type="text/html">
<!-- your template here -->
</script>
и один из многих плагинов JQuery.
http://weblogs.asp.net/scottgu/archive/2010/05/07/jquery-templates-and-data-linking-and-microsoft-contributing-to-jquery.aspx
Ответ 9
У меня есть шаблонный шаблон под названием stencil.js, который, я считаю, довольно милый. Он работает с jQuery через jquery-haml DOM building engine.
Напишите свой шаблон (который вы можете поместить во внешний файл и декодировать как JSON):
["%div.sidebar_elem"
["%a", { href: { key:'link' } },
{ key: "text" }
]
]
И запустите его через stencil
вместе с вашими данными:
$("#parent").stencil(template, { link: "http://example.com", text: "Click me!" });
В stencil.js существует проект GitHub, но я думаю, что это именно то, что вы ищете.
Он мог бы использовать еще несколько полезных методов, и некоторый код для незавершенного компонента привязки данных все еще находится в ветке master
, поэтому напишите мне комментарий, если вы заинтересованы, и я посмотрю, смогу ли я его очистить.
Ответ 10
проверьте ibdom, а также некоторый фон/историю здесь: Рекомендуемая библиотека шаблонов JavaScript HTML для JQuery?
Ответ 11
Может всегда идти с jQuery-шаблонами: http://api.jquery.com/category/plugins/templates/
Ответ 12
Как насчет http://www.enfusion-framework.org
Вещи вроде этого:
<span template>Our telephone number is {phone}.</span>
<span session>You are logged in as {nickname}.</span>