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>

Результат:

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

Ответ 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-фреймворков.

Ответ 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, поэтому напишите мне комментарий, если вы заинтересованы, и я посмотрю, смогу ли я его очистить.

Ответ 12

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

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

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

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