Рекомендуемая библиотека шаблонов JavaScript JavaScript для JQuery?

Ответ 1

Ну, честно говоря, клиентские шаблоны очень горячие в наши дни, но довольно джунгли.

Самые популярные, я считаю:

• pure: он использует только js, а не его собственные "Синтаксис"
• mustache: довольно стабильный и приятный I слышал.
• jqote2: очень быстро согласно jsperfs
• шаблоны jquery (устаревшие):

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

Лично мне трудно скомпоновать новый синтаксис и набор логики (логика смешивания и шаблон, привет?) и пошло чисто js. Каждый из моих шаблонов хранится в собственном html файле (./usersTable.row.html). Я использую шаблоны только при ajaxing-контенте, и у меня мало логических js файлов, один для таблиц, один для div, один для списков. и даже не для выбора опций (где я использую другой метод).

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

Ответ 2

jTemplates

механизм шаблона для JavaScript.

Плагин для jQuery...

Особенности:

• 100% в JavaScript
• precompilator
• Поддержка JSON
• Работа с Ajax
• Разрешить использование кода JavaScript внутри шаблона
• Разрешить создание каскадных шаблонов
• Разрешить определять параметры в шаблонах
• Live Refresh! - автоматическое обновление содержимого с сервера...

Ответ 3

В этом разделе есть разумный дискуссионный документ который охватывает ряд инструментов шаблонов. Однако это не относится к jQuery.

Ответ 4

jQuery Templates Plugin, созданный Microsoft и принятый как официальный плагин jQuery.

Но заметьте, что его теперь не рекомендуется.

Ответ 5

Я бы посмотрел json2html, он не должен писать HTML-фрагменты и вместо этого полагается на преобразования JSON для преобразования массива объектов JSON в неструктурированный списки. Очень быстро и использует создание DOM.

Ответ 6

Несколько лет назад я построил IBDOM: http://ibdom.sf.net/ | По состоянию на декабрь 2009 года он поддерживает привязку jQuery, если вы получаете его прямо из ствола.

$("#foo").injectWith(collectionOfJavaScriptObjects);

или

$("#foo").injectWith(simpleJavaScriptObject);

Кроме того, теперь вы можете поместить все маркеры "data: propName" в атрибуты class= ": propName other classnames", поэтому вам не нужно помещать контент приложения с этими маркерами.

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

Скептикам этого вопроса:

Назад, когда Microsoft изобрела IE5, что мы теперь знаем как XmlHttpRequest и шаблон "ajax", часть обещания заключалась в том, чтобы чисто обмениваться данными между веб-браузером и сервером. Эти данные должны были быть инкапсулированы в XML, потому что в 1999/2000 году XML был просто очень жарким. Помимо получения XML-документа по сети с помощью механизма обратного вызова, компонент MSXML ActiveX также поддерживал предварительную реализацию реализации того, что мы теперь знаем как XSL-T и XPath.

Объединяя поиск HTTP/XML, XPath и XSL-T, разработчикам предоставлялось огромное творчество для создания богатых "документов", которые вели себя как "приложения", чисто отправляя и, что более важно, извлекали данные с сервера.

Почему это полезная модель? Это зависит от того, насколько сложным является ваш пользовательский интерфейс, и насколько вы заботитесь об его ремонтопригодности.

При создании визуально очень богатого семантически выделенного интерфейса с расширенным CSS, последнее, что вы хотите сделать, это фрагменты разметки в "мини-контроллер/представления", так что вы можете .innerHTML фрагмент документа в основной документ, и вот почему.

Одним из основных принципов сохранения расширенного пользовательского интерфейса html/css является сохранение его валидации, по крайней мере, во время его активной фазы разработки. Если ваша разметка проверена, вы можете сосредоточиться на своих ошибках CSS. Теперь, если фрагменты разметки в конечном итоге вводятся на разных этапах взаимодействия с пользователем, все становится очень громоздким для управления, и все это становится хрупким.

Идея заключалась в том, чтобы иметь все ваши пользовательские интерфейсы разметки в одном документе, извлекать ТОЛЬКО ДАННЫЕ по сети и использовать прочную структуру, которая, по крайней мере, просто введет ваши данные в ваши конструкции разметки и, самое большее, реплицируйте конструкции разметки, которые вы отметили как повторяемые.

Это было возможно с XSL-T и XPath в IE5 +, но практически никаких других браузеров. Некоторые фреймворки для браузера F/OSS занимаются XPath, но это не совсем то, на что мы можем положиться.

Так что же самое лучшее для достижения такой картины? IBDOM. Получите данные со своего сервера, введите их в свой документ. без особых усилий.

Ответ 7

Вы должны взглянуть на Javascript-Templates, это небольшой механизм шаблонов, используемый в известном плагине загрузки файлов jQuery и разработанный тем же автором, Себастьян Цан (@blueimp)

https://github.com/blueimp/JavaScript-Templates

Следуйте рекомендациям по использованию, сделанным Себастьяном, просто удалите эту строку

document.getElementById("result").innerHTML = tmpl("tmpl-demo", data);

Заменить его этим

$('#result').html(tmpl('tmpl-demo', data));

Не забывайте, чтобы добавить тег результата div в свой HTML файл.

<div id="result"></div>

Enjoy