Как построить DOM, используя javascript и шаблоны?

Question

Я создаю приложение, в котором большая часть HTML создается с использованием JavaScript. Структура DOM создается с использованием некоторых структур данных JSON, которые отправляются с сервера, а затем код на стороне клиента создает пользовательский интерфейс для этих данных.

Мой текущий подход состоит в том, чтобы пройтись по структурам данных JSON и вызвать метод script.aculo.us Builder.node для построения структуры DOM, а затем добавить его к некоторому элементу, который фактически находится в HTML, отправленном с сервера. По пути я регистрирую слушателей событий для различных элементов, которые в них нуждаются. Это обеспечивает большую гибкость и очень динамичный интерфейс.

Однако я чувствую, что это не очень устойчиво, поскольку логика представления (т. Е. Структура DOM) так тесно связана с кодом, который обходит данные, и обработчики событий, и данные, которые хранятся в памяти. поддерживать состояние и может передавать эти изменения обратно на сервер.

Существуют ли какие-либо шаблонные решения, которые позволят мне отделить структуру DOM от кода, который управляет приложением? В настоящее время моими единственными библиотечными зависимостями являются prototype.js и script.aculo.us, поэтому я не хотел бы вводить какие-либо большие библиотеки, но любые предложения приветствуются.

Спасибо!

РЕДАКТИРОВАТЬ: По какой-то причине Какой хороший язык шаблонов поддерживается в Javascript? не появилось в небольших результатах поиска, когда я набирал этот вопрос. Однако он отображается на боковой панели «Связанные».

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

Answer 1

Есть несколько шаблонных решений, но они не делают намного больше, чем вы уже делаете. jQuery проделал некоторую работу по этим направлениям , и некоторые плагины jQuery появились в качестве решений. Prototype.js и другие также имеют решения.

Некоторые опции включают в себя:

• Шаблоны-прототипы
• Ajax Pages

В общем, Ext js имеет несколько симпатичных диких и хитрых вещей, включая некоторые шаблонов , но вы бы добавили еще одну библиотеку . В наши дни так много библиотек бросают, и зачастую намного проще реализовать легкое и простое специальное решение. Попробуйте создать несколько объектов DOM самостоятельно. Если у вас есть данные JSON, проанализируйте их в памяти и запустите через функцию. Это на самом деле взрыв, и многие люди делают это.

Sidenote: То, что вы делаете, может быть вполне устойчивым и поддерживаемым . Помните, что когда вы отправляете страницу HTML, браузер помещает структуру DOM в память примерно так же, как ваш javascript. Я не особо рекомендую ни одно из этих решений. Похоже, что вы создали небольшую систему для ваших конкретных нужд, и я бы сказал, что усовершенствование вашего дизайна будет, по крайней мере, таким же ценным, как переход к чужому шаблону, с дополнительным преимуществом: возможность создавать некоторые собственные зависимости .

Sidenote: обычно не рекомендуется генерировать весь DOM на клиенте, по крайней мере, не для многих рынков. Иногда это решение A-OK, как, например, в вашем случае, но аудитории в целом следует обратить внимание на то, что такой стиль разработки не всегда является лучшим способом путешествовать.

Answer 2

Ваш шаблон может быть заключен в виджет. Prototype имеет средства для создания надстроек, однако я больше всего знаком с тем, как это сделать в jQuery. Сначала я попробовал прототип, но позже понял, что у jQuery есть каждый прототип и даже больше. Он также имеет больше надстроек / виджетов / плагинов, созданных сообществом пользователей.

Builder - это просто дополнение к прототипу. однако создание HTML-элементов DOM в jQuery является частью основных функций.

http://docs.jquery.com/Core/jQuery#html в сочетании с: http://docs.jquery.com/Manipulation/append#content

Вот пример построения некоторого html и добавления его в выбор элемента jQuery.

$(document.body).append($('<div id="sub-menu-holder" style="position:absolute;top:0;left:0;border:0px none;"></div>'));

Вы также можете получить структуры данных из вызовов ajax и использовать их для создания сущностей, или вы можете просто вернуть html из вызова ajax и добавить его непосредственно в DOM в соответствующем месте.

http://docs.jquery.com/Ajax/load#urldatacallback

Вот пример из документации по функции загрузки jquery.

$ (Документ) .ready (функция () { $ ("# links"). load ("/ Main_Page # jq-p-Getting-Started li"); });

Вот и все. Если ваш ajax-вызов возвращает весь HTML-код, который нужно вставить, и вы знаете идентификатор элемента, куда он идет, это все, что вам нужно. Теперь все, что вам нужно, это определить, как создать HTML на стороне сервера. Не зная конкретных деталей того, что вы строите, трудно ответить. Но вашему шаблонизатору на стороне сервера не нужно много знать о том, где будет размещен сгенерированный html.

Answer 3

есть несколько плагинов 'template' для jQuery:

• jsRepeater
• jTemplates
• noTemplate
• Template

Существуют некоторые дополнительные функции XSLT, которые все преобразуют в клиенте, но я не думаю, что XSL достаточно «дружественен к дизайнеру»

Answer 4

Вы можете взглянуть на шаблон soma, синтаксис довольно легкий.

Чистые манипуляции с DOM, множество функций, естественный синтаксис, полностью расширяемый другими библиотеками, такими как underscore.string, вызовы функций с параметрами, помощники, наблюдатели. Возможность обновления только некоторых узлов, если необходимо, шаблонов внутри самого DOM.

http://soundstep.github.com/soma-template/

Answer 5

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

Answer 6

QueryTemplates позволяет полностью отделить разметку от логики. Для этого используются селекторы DOM и CSS. Он имеет облегченную версию для JavaScript (как плагин jQuery) и стандартную версию, в которой может генерировать собственный код JS (библиотека не требуется для его выполнения) . Вам нужен PHP для генерации шаблона со стандартной версией (версия CLI в порядке). Библиотека основана на phpQuery , порте jQuery для PHP.

Вы можете увидеть демонстрационную версию JavaScript . Используя стандартную версию, вы можете получить достаточно клиентский опыт в PHP - есть события DOM, поддержка JSON, даже AJAX с JSONP.

Answer 7

ExtJS имеет отличный синтаксис шаблонов: текст ссылки

Answer 8

Если я понимаю вопрос, вы хотели бы иметь возможность динамически создавать графический интерфейс, но на основе предопределенных шаблонов HTML? Я знаю, что мне часто было странно строить DOM с использованием JS, когда есть совершенно хороший язык (HTML) для того же.

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