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

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

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

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

Вы должны проверить шаблон закрытия 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).

У меня есть механизм шаблонов, называемый трафаретом.js, что, на мой взгляд, довольно приятно. Он работает с jQuery через механизм построения DOM jquery-haml.

Напишите свой шаблон (который вы можете поместить во внешний файл и декодировать как JSON):

["%div.sidebar_elem"
    ["%a", { href: { key:'link' } },
        { key: "text" }
    ]
]

И пропустите его через трафарет вместе с вашими данными:

$("#parent").stencil(template, { link: "http://example.com", text: "Click me!" });

Больше примеров на stencil.js Проект GitHub, но я думаю, что это именно то, что вам нужно.

Можно использовать еще пару служебных методов, а некоторый код для незавершенного компонента привязки данных все еще находится в ветке master, поэтому напишите мне комментарий, если вам интересно, и я посмотрю, будет ли Я могу очистить его.

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

http://github.com/edspencer/jaml

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

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

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

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

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

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

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

Используйте блок 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