HTML-шаблоны в Javascript?Без кодирования на странице?

Question

Я - веб-парень, занимающийся в основном серверной частью Perl, и постепенно делаю выводы.

• Гораздо лучше выполнить большую часть кода с помощью Javascript и перебрасывать данные назад и вперед с помощью AJAX, чем нажимать на кнопку "Подтвердить" и перезагружать в основном идентичную страницу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»reciting.

Итак, я ищу основанный на Javascript инструмент для создания шаблонов, который позволил бы мне иметь свои шаблоны во внешнем файле, чтобы я мог иметь одно изменение шаблона, охватывающее серию веб-страниц.Если это основано на jQuery, это здорово, меньше вещей, которые я должен выучить, но это не нарушает договоренности.

Answer 1

Есть несколько хороших:

Mustache.js
Pure.js
Шаблон Json

Если вам нужна версия jQuery, Tempest выглядит хорошо.

Answer 2

Поскольку нет четко определенного API и лучшей библиотеки шаблонов, я бы посоветовал вам выбрать тот, который активно разрабатывается.Ниже я кратко объяснил две библиотеки, которые активно разрабатываются.

Команда jQuery решила, что шаблоны jQuery больше не будут активно разрабатываться или поддерживаться, поэтому я настоятельно рекомендую НЕ использовать ее.См. эту запись в блоге .

. Вы можете использовать JsRender в соответствии с JsViews , чтобы использовать все функциональные возможности, предоставляемые шаблонами jQuery, и даже больше как данныесшивание.Вы можете найти демонстрационные версии для JsRender и JsViews .Я бы предложил использовать эти библиотеки, поскольку они активно разрабатываются командой пользовательского интерфейса jQuery, но имейте в виду, что они все еще даже не бета-версии!

Усы - это еще одно шаблонное решение, которое активно разрабатывается, и оно упрощает шаблоны путем объединения условных выражений.теги и теги перечисления.Он также предоставляет мощные функции, такие как инвертированные секции, частичные и высокоуровневые секции с простым синтаксисомУсы также являются одним из самых быстрых шаблонных решений См. Блог Брайана Ландау .Лично я считаю усы хорошим шаблонным решением, поскольку он имеет простой синтаксис и хорошо работает.

Answer 3

Взгляните на это 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, если вам действительно нужно, чтобы они были в отдельных файлах, что, на мой взгляд, не является разумной идеей, потому что это означает дополнительную передачу туда и обратно на сервер,Таким образом, в конце концов, ради оптимизации вы можете хранить их в отдельных файлах, но вставлять их на стороне сервера на странице, где они нужны.

Answer 4

Мне известны 2 библиотеки, которые не смешивают кодирование шаблонов с HTML-разметками: chain.js и PURE

chain выполняет только манипуляции DOMPURE использует сочетание DOM и innerHTML, так как только DOM может медленно обрабатывать большие шаблоны.

Я основной участник PURE, и мы создали его для создания веб-приложения наМодель ajax, которую вы описываете.

Answer 5

Как насчет EJS ?

Пример с их страницы:

"EJS объединяет данные и шаблон для создания HTML."

Данные:

{title: 'Cleaning Supplies',  supplies: ['mop', 'broom', 'duster'] }

Шаблон:

<ul>
<% for(var i=0; i<supplies.length; i++) {%>
   <li><%= supplies[i] %></li>
<% } %>
</ul>

Результат:

• швабра
• метла
• пыльник

Answer 6

А как насчет кода JAML?

http://github.com/edspencer/jaml

Аналогично нескольким из вышеперечисленных, но я считаю, что это немного более логично ...

ЭтоКонцепция определения ваших шаблонов через JSON / JavaScript, а затем использование функции в JavaScript для передачи аргументов в ваш шаблон, который обрабатывает его и возвращает как элемент.

Существуют реализации для различных существующих JavaScript-фреймворков.

Answer 7

Вы должны проверить шаблон закрытия Google. Он полностью независим, поэтому вы можете использовать его с любой библиотекой, какой захотите. Это шаблонизатор, написанный на 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}

Это создаст функцию под названием examples.helloName, которая может быть вызвана как

Их формат очень удобен для IDE, при редактировании шаблонов я получаю подсветку всего синтаксиса HTML

examples.helloName({name: 'Ana', greetingWord:"Howdy"});

Вы можете вызывать другие шаблоны из шаблонов, он автоматически скрывает ваши html-данные (если вы этого не говорите), обеспечивает поддержку двунаправленной связи.

Еще одна замечательная вещь - тот факт, что шаблонизатор также может генерировать Java-код. Поэтому кто-то, кто пишет приложение, которое должно поддерживать браузеры с отключенными сценариями, может сгенерировать HTML на сервере, если это необходимо.

И последнее, но не менее важное: в отличие от других систем шаблонов js (), шаблон анализируется на сервере, поэтому клиентская сторона должна выполнять только слияние шаблона и данных, а синтаксический анализ шаблона выполняется как сборка. наступить на сервер.

http://dev.sencha.com/deploy/dev/docs/?class=Ext.XTemplate - пример инструмента шаблонов, который полностью работает на клиенте. У этого подхода есть две проблемы: синтаксический анализ шаблона выполняется на клиенте, а ваш HTML-код должен быть встроен в строку javascript. Однако некоторые IDE (Intellij) будут выделять HTML внутри строк JS).

Answer 8

А как насчет http://www.enfusion -framework.org

Вещи вроде этого:

<span template>Our telephone number is {phone}.</span>

<span session>You are logged in as {nickname}.</span>

Answer 9

Может всегда идти с шаблонами jQuery: http://api.jquery.com/category/plugins/templates/

Answer 10

посмотрите ibdom и немного истории / истории здесь: Рекомендовано JavaScript HTML-библиотека шаблонов для JQuery?