Javascript.Scripting Template

Материал из Hivext Wiki

Перейти к: навигация, поиск

Javascript - Шаблонизация

Рассмотрен пример создания и выполнения шаблона через сервис Скриптинга.

Шаблоны EJS

Задача

Вывести в HTML таблице список пользователей. Таблица в две колонки: первая - имя, вторая - электронная почта. Пользователи хранятся в базе данных в типе users.

Решение

Для начала в базе данных создадим тип users с полями name и email и заполним объектами.

Изображение:Template_users.png

Далее создадим EJS шаблон с именем template/index, который будет принимать JSON объект с полями title - укажет название окна и users - массив объектов полученных из базы данных.

Шаблон template/index, создающий HTML таблицу

<html>
<head>
 <title><%= title %></title>
</head>
<body>
<h2><%= title %></h2>
<table border="1">
<% for(var i=0; i<users.length; i++) {%>
 <tr>
 <td><%= users[i].name %></td>
 <td><%= users[i].email %></td>
 </tr>
<% } %>
</table>
</body>
</html>

Создадим основной скрипт с названием index, в нем мы запросим объекты из базы данных, вызовем шаблон template/index с нужными параметрами и отдадим результат на клиент.

Скрипт index, вызывающий шаблон template/index

//////////////////////////////////////////////////
// Пример работы с шаблоном template/index.
//////////////////////////////////////////////////

// Укажем ноде что данные отдаются в html формате.
hivext.local.SetHeader("Content-Type", "text/html");

// Получим подпись устройства.
var signature = hivext.local.GetDeviceSignature();

// Запрашиваем объекты users из базы данных.
var users = hivext.data.base.GetObjects(appid, signature, "users");

if(users.result == 0) { // Если запрос прошел без ошибок, продолжаем.

 // Вызов шаблона template/index и передача данных.
 var template = hivext.development.scripting.eval(appid, signature, "template/index", {
    title : "Hello world",
    users : users.objects
 });

 if(template.result == 0) return template.response;
 else return template.error;

}

return users.error;​

Теперь просто вызовем скрипт index в браузере и получим результат

Изображение:Template_result.png

Личные инструменты