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

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

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

Answer 2

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