Шаблоны или аналог для JavaScript-программ в браузере

Question

Я много занимался программированием на стороне сервера и использовал несколько разных языков шаблонов для создания (X) HTML. Эта часть мне очень понятна.

Но что меня немного интересует, так это то, как люди используют это в клиентских программах JavaScript? Я имею в виду, очевидно, что могут быть написаны языки шаблонов для JavaScript, которые работают внутри браузера - но так ли это обычно делают люди? Или люди просто манипулируют DOM напрямую? Или есть какие-нибудь хорошие вспомогательные библиотеки, которыми пользуется большинство людей?

В качестве примера - скажем, я хочу приложение JavaScript, которое извлекает список карточек контактов с удаленного сервера, возвращаемый как объект JSON. Затем я хочу показать эти карточки контактов на стороне браузера, используя определенную предопределенную разметку HTML, к которой я заполняю обязательные поля. Как это обычно делается?

Answer 1

Я просмотрел предложенные здесь решения и не был полностью удовлетворен. То, что я узнал, было:

• Большинство людей просто собирают строки и присваивают их elem.innerHTML. Это слишком уродливо для меня.
• Некоторые люди создают DOM с Builder объектами, поэтому на самом деле они пишут HTML с JavaScript для динамического контента. Это то, что я использовал бы, если бы контент был на 100% динамическим, но в этом случае я бы предпочел иметь шаблоны, которые на самом деле являются HTML, которые я могу настроить.
• Некоторые люди используют настоящие языки шаблонов в клиентском JavaScript. То есть, есть все виды if-конструкций и while-конструкций, замены строк и все такое. Это как бы то, что я искал, когда писал вопрос. Только это кажется совершенно неэффективным для анализа текстовой разметки на стороне клиента, когда у вас под ногами весь механизм DOM.

Но я обнаружил, что действительно хочу сам - это программный способ собрать воедино HTML из фрагментов DOM и заполнить необходимые данные посередине. Я нашел два решения для этого:

• PURE: http://beebole.com/pure/
• Простые шаблоны Javascript с использованием cloneNode: http://amitkumar.com/2009/08/10/easy-javascript-templates-using-clonenode/

Из них я выбрал PURE для своих нужд.

Спасибо за все ответы.

Answer 2

Задание, которое вы описываете, может быть выполнено с помощью системы шаблонов или с помощью ручного манипулирования DOM, точно так же, как выполнение этого на стороне сервера может быть выполнено с помощью системы шаблонов или с помощью последовательности конкатенаций строк. Лично, если мне нужно задать этот вопрос, я обычно использую систему шаблонов. (На самом деле, если вы считаете форматирование в стиле printf, доступное на большинстве языков, системой шаблонов, я вряд ли когда-либо манипулирую строками без использования шаблонов.)

Мне известны несколько языков шаблонов JavaScript:

• югл: http://dev.libjs.net/jugl/
• Шаблоны ExtJS: http://www.extjs.com/deploy/dev/docs/?class=Ext.Template
• Шаблоны закрытия: http://code.google.com/closure/templates/

Шаблоны замыканий интересны тем, что для них также доступен сервер рендеринга, поэтому вы можете обмениваться шаблонами между серверным кодом и JavaScript. jugl очень похож на TAL, так что вы можете сделать это и с jugl.

Answer 3

Есть множество способов, которыми люди обычно делают это:

• Сохранение html-файла в файле, полученном с сервера, когда вы выполняете ajax-вызов, и просто вставляете его в DOM
• Получение динамического фрагмента содержимого, которое вы хотите, а затем сборка всего HTML-кода на стороне клиента и вставка его в DOM (это, вероятно, самый распространенный и тот, который я бы рекомендовал меньше всего)
  • Использование языка шаблонов JavaScript (я довольно неравнодушен к плагину tempest jquery)

Существуют и другие решения, такие как скрытие содержимого, которое будет отображаться в тегах textarea или html-скриптах, но я не являюсь их поклонником, поскольку они имеют тенденцию создавать неправильную / недействительную разметку.

Answer 4

Если вы используете Script # , вы можете рассмотреть SharpTemplate , строго типизированный, очень эффективный механизм HTML-шаблонов.

Answer 5

Я предлагаю ExtJS XTemplates. Простой, мощный, автономный, приятный. -j

Answer 6

Ты прав. Есть библиотеки шаблонов для JavaScript. Если это достаточно просто, HTML можно просто создать как строку и добавить в DOM, после чего браузер отобразит его.

Вот библиотека микро-шаблонов Джона Резига: http://ejohn.org/blog/javascript-micro-templating/