http://embeddedjs.com/
Я занимаюсь разработкой IFrame приложений для социальной сети ВКонтакте. Самый удобный способ навигации по приложению — это динамическая подгрузка данных, без перезагрузки всей страницы. Раньше я генерил html код который нужно отобразить на сервере, пока не встретил EJS — JavaScript Templates…
EJS оказался одним из самых удобных и подходящих мне шаблонизаторов. Он работает, как с одиночными переменными, так и с массивами (читай объектами), присутствует логика (if...else...).
Покажу на примере, что может данный шаблонизатор.
Шаблон — /templates/question.ejs:
Данные — /data/question.php:
Результат:
+ «плюсы»
— «минусы»
Пример приложения, использующего EJS: http://formspring.vk-app.ru
Подводный камень: шаблонизатор работает только с файлами у которых расширение *.ejs. Хотел, чтобы шаблоны имели расширение *.tpl, но не получилось — виснит на рендеринге… Возможно, если поковырять, то все заработет.
Предыстория
Я занимаюсь разработкой IFrame приложений для социальной сети ВКонтакте. Самый удобный способ навигации по приложению — это динамическая подгрузка данных, без перезагрузки всей страницы. Раньше я генерил html код который нужно отобразить на сервере, пока не встретил EJS — JavaScript Templates…
EJS — Embedded JavaScript
EJS оказался одним из самых удобных и подходящих мне шаблонизаторов. Он работает, как с одиночными переменными, так и с массивами (читай объектами), присутствует логика (if...else...).
Покажу на примере, что может данный шаблонизатор.
Шаблон — /templates/question.ejs:
<div>
<% if(question) { %>
<h2><%= author %>: <%= question %></h2>
<div><textarea name="answer" id="answer"></textarea></div>
<ul class="nNav btnList">
<li>
<a href="" onclick="ACT.question.answer('index'); return false;">Ответить</a>
</li>
</ul>
<% } else { %>
<h2>Нет вопросов, на которые можно ответить!</h2>
<% } %>
</div>
* This source code was highlighted with Source Code Highlighter.
Данные — /data/question.php:
{"id":"98","question":"What are you doing now?","author":"Mihalich88"}
* This source code was highlighted with Source Code Highlighter.
Результат:
$.ajax({
type: "POST",
url: "/data/question.php",
dataType: "json",
data: data,
success: function(ans){
var html = new EJS({url: ' /templates/question.ejs'}).render(ans);
}
});
* This source code was highlighted with Source Code Highlighter.
В итоге
+ «плюсы»
- Экономия траффика, т.к. передаются только данные ввиде json-объекта, шаблон кэшируется и берется из кэша
- Снижение нагрузки на сервер, т.к. шаблонизация происходит в браузере
- MVC структура, с выводом «V» за пределы сервера
- Работает даже на Opera Mobile 10
— «минусы»
- Не индексируется, но зато идеально подходит для RIA
Пример приложения, использующего EJS: http://formspring.vk-app.ru
Подводный камень: шаблонизатор работает только с файлами у которых расширение *.ejs. Хотел, чтобы шаблоны имели расширение *.tpl, но не получилось — виснит на рендеринге… Возможно, если поковырять, то все заработет.
Комментариев нет:
Отправить комментарий