Как сегодня модно хранить HTML в Яваскрипте? MVC уже изобрели?

Question

[Cord]

Всем привет!

Давно не писал на Яваскрипте ничего серьезного.
Вижу, очень хорошо развиваются фреймворки.

Скажите, как решается проблема HTML-кода? Когда, например, у вас динамически формируется на основе JSON'а, пришедшего со стороны сервера, сложный HTML-код? Понятно, что можно вернуть HTML-код со стороны сервера, а можно и руками DOM собрать. Но в первом случае вы завязаны на формат данных, во втором иногда очень уж сложные получаются конструкции, и менять многочисленные addChild в случае серьезных изменений в коде трудно. Для этого есть шаблоны на серверной стороне. А вот на клиентсткой что сейчас самое тру?

Answer 1

[TimTowdy]

JavaScript Micro-Templating от Джона Резига.

Comments

[nikitammf]

Очень хороший js-шаблонизатор, маленький и быстрый.

Answer 2

[Дмитрий Гукетлев]

closure templates очень советую. Работают в нескольких боевых проектах. Хостятся на code.google.com точную ссылку могу дать когда за компьютером буду :-)

Answer 3

[nikitammf]

есть так же XML+XSLT

Comments

[DevMan]

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

[Константин Китманов]

Полноте, сударь, XSL поддерживается даже IE6

[DevMan]

JS и CSS тоже поддерживаются IE6 :)
Да и XSLT в IE6 более-менее нормальный только при условии установки MSXML 4+, что не всегда встречается.
Спорить — занятие неблагодарное. В свое время отгребли кучу проблем с различными браузерами и пришли к выводу, что до наступления светлого будующего, проще/быстрее/менее_затратно_для_нервов производить server-side transformation.
Хотя, может за прошедшие полтора года это будущее наступило.

[nikitammf]

Это распространенное заблуждение о клиентском xslt. Посмотрите яндекс-почту, построена по принципу клиентского xslt+xml. Хотя мне самому больше нравиться JavaScript Micro-Templating от Джона Резига. Просто вся прелесть xslt+xml, возможность использовать одинаковые шаблоны для клиента и сервера.

[DevMan]

Это распространенное заблуждение о клиентском xslt

С радостью бы с вами согласился, но мой опыт не позволяет.
Я говорю про «честную» трансформацию — когда браузеру отдал xml и шаблон, и он всё сам переколбасил сам без всяких js. На простых шаблонах это работает на ура.
A если для трансформации необходимо применять js, то выгоднее уже собрать html из json или использовать js-шаблоны, а не xml+xslt.

[nikitammf]

Не холивара ради. Клиентский XSLT нужно использовать только в тех проектах, где серверный шаблонизатор тоже XSLT(говорю по опыту, все работает без особого напильника, есть свои проблемы, но они известны).

[DevMan]

Я не холиварю — мне действительно интересно, смогли ли вы добиться честного (без js) преобразования различными браузерами более-менее сложных шаблонов.

Answer 4

[1nd1go]

я тоже часто сталкиваюсь с этим вопросом.
для себя избрал три подхода:

1. если требуется сгенерировать мало кода, что-то впроде одного текстового поля с лэйблом, использую для этого jquery: $(''...).after(...). Удобно тем, что можно скэшировать ссылки на элементы, на которые потом навешиваются обработчкики событий и т.п.

2. структура может быть чуть посложнее, но не намного, то юзаю $.nano — удобный плагин и очень маленький. мне нравится даже то как он написан. Правда есть ограничения — у него плохо с массивами значений, но

3. Если большие данные для рендеринга ходят между клиентом и сервером, то я здесь уже весь HTML генерирую на сервере, а потом его вставляю. Дело в том, что я считаю, что сайт попрежнему должен иметь возможность работать без JS (это отдельный вопрос — почему). Поэтому если JS по каким-то причинам не отрабатывает, приходит нормальная страница. Сервер сам решает в зависимости от того ajax или неajax запрос пришел и отдает либо полную страницу либо кусок. Кстати, помогает в этом jquery ajaxify плагин

Comments

[Treg]

В отдаче HTML вместо JSON есть и другой плюс — скорость рендеринга на сервере всегда стандартна, тогда как на клиенте зависит от машины и браузера, соответственно может тормозить при больших объемах.

[ilimer]

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

Answer 5

[plagi]

Не рекомендую использовать xml+xslt, все браузеры по разному его воспринимают.
Проверено на собственной шкуре. Очень тяжело отлаживать ошибки.

Comments

[DevMan]

О чём, я собственно, и писал выше.
Использовать можно, временами даже необходимо. Только преобразование производить на сервере, а не клиенте.

Answer 6

[burya]

Только что закончил большой проект, в котором для таких целей использовал EJS (опенсорсная javascript template библиотека). Можно делать шаблоны с довольно навороченной логикой.

Answer 7

[Treg]

Мой Вам совет — не мудрите с шаблонизаторами для JS. Если надо по шаблону размножить кусок кода, например, для таблицы с данными — сделайте его скрытым с классом template. Теги, в которые надо подставлять значения, тоже снабдите соответствующими классами, например: cell-name, cell-price и т.п. и подставляйте в них значения. Этим вы убиваете нескольких зайцев (подстановка значений, определение обработчиков, удобная отладка и т.п.), используя простые инструменты.

Comments

[ilimer]

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

[Treg]

Что вы подразумеваете под списками повторяющихся элементов? Кто вам мешает грузить шаблоны асинхронно, если вам это очень понадобилось? Я привел лишь пример. Плюс — гибкость, вы сами определяете как и что у вас рендерится в шаблоне и не зависите от того, как реализован шаблонизатор. Я сталкивался с несколькими js шаблонизаторами и пользы от них особой нет, больше усложняет. К примеру шаблонизатор Micro-Templating, вы не передали один из параметров в массиве, определенный в шаблоне — вылетит ошибка, хотя разумное поведение шаблонизатора — посдавить null. При реализации сложных приложений, лучше использовать собственные разработки.

Answer 8

[ilimer]

В одном проекте использую api.jquery.com/tmpl/ (официальный плагин для jQuery), удобный и функциональный плагин.

В другом проекте использую самописный прекомпил(используя xsl) серверных шаблонов в javascript — очень удобно одни и те же шаблоны могут легко использоваться как на серверной стороне, так и на клиентской