Как построить DOM с помощью javascript и шаблонов?

для jQuery есть несколько "шаблонных" плагинов:

• jsRepeater
• jTemplates
• noTemplate
• Шаблон

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

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

Некоторые варианты включают:

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

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

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

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

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

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

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

Ваш шаблон может быть инкапсулирован в виджет. У 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 (функция () { $ ("# ссылки"). load ("/ Main_Page # jq-p-Getting-Started li"); });

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

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

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

Если вы используете Скрипт №, вы можете рассмотреть SharpTemplate, строго типизированный, сверхэффективный механизм создания шаблонов HTML.

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

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

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