Рекомендуемая библиотека HTML-шаблонов JavaScript для JQuery? [закрыто]
89
Есть предложения по поводу того, какая библиотека шаблонов HTML подойдет для JQuery? При поиске в Google появляется довольно много библиотек, но я не уверен, есть ли хорошо известная библиотека, которая выдержит испытание временем.
Допустим, вы возвращаете объект json со 100 записями. Каждая запись должна генерировать один и тот же фрагмент HTML. Это просто помогает использовать шаблон, чем генерировать разметку в js. Позволяет дизайнеру также разрабатывать его, а не разметку внутри строки в функции js
redsquare
3
@cletus - потому что проще использовать шаблон в формате html, чем цепочку дополнений
есть много других, но вы должны протестировать их, чтобы увидеть, что лучше всего подходит вам и вашему стилю проекта.
Лично мне было сложно добавить новый синтаксис и набор логики ( смешивание логики и шаблона, привет ?? ), и я пошел на чистый js. Каждый из моих шаблонов хранится в собственном html файле (./usersTable.row.html). Я использую шаблоны только при ajaxing-контенте, и у меня есть несколько "логических" js-файлов, один для таблиц, один для div, один для списков. и даже не один для вариантов выбора (где я использую другой метод).
Каждый раз, когда я пытался сделать что-то более сложное, я обнаруживал, что код был менее ясным и мне требовалось больше времени для стабилизации, чем при использовании «старого» способа. На мой взгляд, логика в шаблоне - полная чушь, а добавление собственного синтаксиса добавляет лишь очень трудно отслеживаемые ошибки.
и "устарело", так как. Разработка остановлена, и она не выйдет из стадии бета-тестирования. парень ms и команда jquery-ui работают над новым шаблоном, основанным на JSRender thou;)
roselan
Ха, облом, я использую его во всем своем веб-приложении :( Спасибо за совет! У вас есть ссылка на будущий движок шаблонов, о котором вы упомянули?
Андрей
1
Если все пойдет хорошо, jsrender by boris moore найдет его в jquery-ui. Думаю, не нужно торопиться;)
roselan
1
Я реализовал jsRender в проекте, и это просто потрясающе. Стоит проверить.
ASeale
4
Я бы попробовал json2html , он избавляет от необходимости писать фрагменты HTML и вместо этого полагается на преобразования JSON для преобразования массивов объектов JSON в неструктурированные списки. Очень быстро и использует создание DOM.
отказ от ответственности .. Я написал это. Но стоит проверить;)
Чад Браун
3
Пару лет назад я построил IBDOM: http://ibdom.sf.net/ | По состоянию на декабрь 2009 года он поддерживает привязку jQuery, если вы получаете ее прямо из магистрали.
Кроме того, теперь вы можете поместить все маркеры «data: propName» в атрибуты class = «data: propName other classnames», чтобы вам не пришлось засорять содержимое вашего приложения этими маркерами.
Я еще не обновил кучу документации, чтобы отразить мои недавние улучшения, но у меня были различные версии этой платформы с 2007 года.
К скептикам этого вопроса:
Когда Microsoft изобрела с IE5 то, что мы теперь знаем как XmlHttpRequest и шаблон «ajax», часть обещания, лежащего в основе этого, заключалась в чисто обмене данными между веб-браузером и сервером. Эти данные должны были быть инкапсулированы в XML, потому что в 1999/2000 году XML был просто очень популярен. Помимо получения XML-документа по сети с помощью механизма обратного вызова, компонент MSXML ActiveX MS также поддерживал предварительную реализацию того, что мы теперь знаем как XSL-T и XPath.
Комбинация получения HTTP / XML, XPath и XSL-T предоставила разработчикам огромные возможности для создания богатых «документов», которые вели себя как «приложения», просто отправляя и, что более важно, получая данные с сервера.
Почему это полезный шаблон? Это зависит от того, насколько сложен ваш пользовательский интерфейс и насколько вы заботитесь о его ремонтопригодности.
При построении визуально очень богатого семантически размеченного интерфейса с расширенным CSS последнее, что вам нужно сделать, это разбить фрагменты разметки на «мини-контроллер / представления», чтобы вы могли .innerHTML фрагмент документа в основной документ, и вот почему.
Одним из ключевых принципов обеспечения управляемости расширенного пользовательского интерфейса html / css является сохранение его валидации, по крайней мере, во время активной фазы разработки. Если ваша разметка проходит проверку, вы можете сосредоточиться на своих ошибках CSS. Теперь, если фрагменты разметки в конечном итоге внедряются на различных этапах взаимодействия с пользователем, все это становится очень громоздким в управлении, и все это становится хрупким.
Идея заключалась в том, чтобы иметь все ваши конструкции пользовательского интерфейса разметки в одном документе, извлекать ТОЛЬКО ДАННЫЕ по сети и использовать прочную структуру, которая будет, по крайней мере, просто вводить ваши данные в ваши конструкции разметки и, как минимум, воспроизводить конструкции разметки который вы отметили как повторяемый.
Это было возможно с XSL-T и XPath в IE5 +, но практически без других браузеров. Некоторые браузерные фреймворки F / OSS балуются XPath, но пока это не совсем то, на что мы можем положиться.
Итак, что еще лучше всего для достижения такого шаблона? IBDOM. Получите данные со своего сервера, вставьте их в свой документ. легко.
еще одна вещь: IBDOM использует 100% чистые методы DOM и нулевой innerHTML.
Крис Холланд,
еще одно замечание: IBDOM реализует то, что я называю «forkedLoopExecution», который является внутренним компонентом, а также чем-то, что можно использовать самостоятельно. Проблема заключалась в следующем: предположим, вы изменяете DOM с помощью createElement и appendChild в некоторой конструкции цикла, которая должна обрабатывать довольно большой массив больших объектов данных: большинство браузеров не будут «перерисовывать» пользовательский интерфейс до тех пор, пока код, влияющий на DOM, "возвращается". В большом «цикле for» с большим количеством данных наши результаты поиска могут занять заметное время от полсекунды до пары секунд, прежде чем отобразить все это одним фрагментом.
Крис Холланд,
Решение: выполнение разветвленного цикла использует рекурсивное выполнение, индуцированное setTimeout, на протяжении всего жизненного цикла многократно передаваемого сбора данных, по сути, «возврат и перерисовка» на каждой итерации цикла, что дает вам ощущение мгновенного рендеринга: «дать пользователю что-нибудь посмотреть - прямо сейчас, черт возьми ".
Крис Холланд,
2
Вам следует взглянуть на Javascript-Templates, это небольшой движок шаблонов, используемый в известном плагине jQuery File Upload и разработанный тем же автором, Себастьяном Чан (@blueimp).
Ответы:
Ну, честно говоря, создание шаблонов на стороне клиента сейчас очень популярно, но это настоящие джунгли.
наиболее популярными, как мне кажется, являются:
есть много других, но вы должны протестировать их, чтобы увидеть, что лучше всего подходит вам и вашему стилю проекта.
Лично мне было сложно добавить новый синтаксис и набор логики ( смешивание логики и шаблона, привет ?? ), и я пошел на чистый js. Каждый из моих шаблонов хранится в собственном html файле (./usersTable.row.html). Я использую шаблоны только при ajaxing-контенте, и у меня есть несколько "логических" js-файлов, один для таблиц, один для div, один для списков. и даже не один для вариантов выбора (где я использую другой метод).
Каждый раз, когда я пытался сделать что-то более сложное, я обнаруживал, что код был менее ясным и мне требовалось больше времени для стабилизации, чем при использовании «старого» способа. На мой взгляд, логика в шаблоне - полная чушь, а добавление собственного синтаксиса добавляет лишь очень трудно отслеживаемые ошибки.
источник
jTemplates
источник
Существует разумное обсуждение документ на эту тему здесь , которая охватывает широкий спектр шаблонизаторов. Однако не только для jQuery.
источник
Плагин jQuery Templates, созданный Microsoft и принятый в качестве официального плагина jQuery.
Но учтите, что теперь он устарел.
источник
Я бы попробовал json2html , он избавляет от необходимости писать фрагменты HTML и вместо этого полагается на преобразования JSON для преобразования массивов объектов JSON в неструктурированные списки. Очень быстро и использует создание DOM.
источник
Пару лет назад я построил IBDOM: http://ibdom.sf.net/ | По состоянию на декабрь 2009 года он поддерживает привязку jQuery, если вы получаете ее прямо из магистрали.
$("#foo").injectWith(collectionOfJavaScriptObjects);или
$("#foo").injectWith(simpleJavaScriptObject);Кроме того, теперь вы можете поместить все маркеры «data: propName» в атрибуты class = «data: propName other classnames», чтобы вам не пришлось засорять содержимое вашего приложения этими маркерами.
Я еще не обновил кучу документации, чтобы отразить мои недавние улучшения, но у меня были различные версии этой платформы с 2007 года.
К скептикам этого вопроса:
Когда Microsoft изобрела с IE5 то, что мы теперь знаем как XmlHttpRequest и шаблон «ajax», часть обещания, лежащего в основе этого, заключалась в чисто обмене данными между веб-браузером и сервером. Эти данные должны были быть инкапсулированы в XML, потому что в 1999/2000 году XML был просто очень популярен. Помимо получения XML-документа по сети с помощью механизма обратного вызова, компонент MSXML ActiveX MS также поддерживал предварительную реализацию того, что мы теперь знаем как XSL-T и XPath.
Комбинация получения HTTP / XML, XPath и XSL-T предоставила разработчикам огромные возможности для создания богатых «документов», которые вели себя как «приложения», просто отправляя и, что более важно, получая данные с сервера.
Почему это полезный шаблон? Это зависит от того, насколько сложен ваш пользовательский интерфейс и насколько вы заботитесь о его ремонтопригодности.
При построении визуально очень богатого семантически размеченного интерфейса с расширенным CSS последнее, что вам нужно сделать, это разбить фрагменты разметки на «мини-контроллер / представления», чтобы вы могли .innerHTML фрагмент документа в основной документ, и вот почему.
Одним из ключевых принципов обеспечения управляемости расширенного пользовательского интерфейса html / css является сохранение его валидации, по крайней мере, во время активной фазы разработки. Если ваша разметка проходит проверку, вы можете сосредоточиться на своих ошибках CSS. Теперь, если фрагменты разметки в конечном итоге внедряются на различных этапах взаимодействия с пользователем, все это становится очень громоздким в управлении, и все это становится хрупким.
Идея заключалась в том, чтобы иметь все ваши конструкции пользовательского интерфейса разметки в одном документе, извлекать ТОЛЬКО ДАННЫЕ по сети и использовать прочную структуру, которая будет, по крайней мере, просто вводить ваши данные в ваши конструкции разметки и, как минимум, воспроизводить конструкции разметки который вы отметили как повторяемый.
Это было возможно с XSL-T и XPath в IE5 +, но практически без других браузеров. Некоторые браузерные фреймворки F / OSS балуются XPath, но пока это не совсем то, на что мы можем положиться.
Итак, что еще лучше всего для достижения такого шаблона? IBDOM. Получите данные со своего сервера, вставьте их в свой документ. легко.
источник
Вам следует взглянуть на Javascript-Templates, это небольшой движок шаблонов, используемый в известном плагине jQuery File Upload и разработанный тем же автором, Себастьяном Чан (@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>наслаждаться
источник