Ко мне часто приходят коллеги и задают простой вопрос:
Привет, у меня есть API, который возвращает объект JSON, и мне нужно показать его на веб-странице - как лучше всего это сделать?
Это кажется простым вопросом - у нас есть много фреймворков JavaScript / SPA, которые могут это сделать. Но эти ребята - классические разработчики полного стека, работающие с небольшим количеством HTML, JavaScript, C # / Java, SQL, у них есть классические веб-приложения с REST API, и они хотят отображать некоторые данные на странице. Не более того. Знакомство с Angular, React, синтаксисом шаблонов, настройка SPA, изучение того, как они могут переносить / модернизировать свои приложения, - это просто накладные расходы.
Проблема
Дело в том, что существует большое количество разработчиков, которым просто нужен простой способ взять JSON и показать его. Они не хотят переписывать все приложение и переходить на SPA только для одной таблицы, которую им нужно заполнить сегодня. Никаких фреймворков, никакой перестройки архитектуры в SPA, им просто нужно несколько строк кода, чтобы завершить свою задачу.
По-видимому, нет встроенной функции, которая помещала бы объект JSON / JavaScript в HTML. Библиотека JQuery может устанавливать HTML или атрибуты узлов, но нет встроенной функции, загружающей JSON в HTML. Есть несколько движков шаблонов / представлений, но у них есть собственный синтаксис, и это не то, что вы бы поместили в обработчик запроса AJAX.
Итак, вопрос в том, как взять объект JSON, полученный из вызова AJAX, и отобразить его в элементе HTML?
Решение - JQuery View Engine
Когда кто-то задает такой вопрос, я рекомендую следовать JQuery View Engine. Это небольшая библиотека, которая берет объект JavaScript, представляющий модель, и помещает его в представление HTML:
var model = { Name: "JavaScript View Engine", Desc: "The simplest view engine", Tags: ["View engine", "JavaScript", "SPA"] }; $("div#template").view(model);
«Просмотр» - это простой HTML:
<div id="template"> <h1 id="Name"></h1> <label>Description:</label> <textarea name="Desc"></textarea> <ul> <li class="bind-Tags"></li> </ul> </div>
Для шаблонов нет специального синтаксиса - просто напишите классический HTML-код или скопируйте его из какого-нибудь образца, такого как JQuery UI или Twitter Bootstrap, и поместите на страницу.
Результат привязки показан в следующем коде:
<div id="template"> <h1 id="Name">JavaScript View Engine</h1> <label>Description:</label> <textarea name="Desc">The simplest view engine</textarea> <ul> <li class="bind-Tags">View engine</li> <li class="bind-Tags">JavaScript</li> <li class="bind-Tags">SPA</li> </ul> </div>
Этот простой движок просмотра будет брать свойства из JSON и просто вставлять их в нужные места в шаблоне - что может быть проще?
Единственное, что необходимо сделать, - это отметить, какие элементы HTML в шаблоне должны соответствовать свойствам объекта JavaScript. Вы можете установить HTML-атрибуты id или name в целевых элементах, которые соответствуют именам свойств в объекте JavaScript, или классы CSS с префиксом «bind-» для элементов, которые должны быть целями для некоторых областей. Затем функция view () сопоставит свойства объекта JSON с элементами HTML с идентификатором, атрибутами имени или классами «bind-» по имени и поместит значения из объекта в элементы HTML, отмеченные классами.
Речь идет не только о сопоставлении - этот JQuery View Engine имеет встроенные правила, которые могут автоматически определять, как заполнять элементы шаблона в зависимости от типа:
- Если HTML-элемент является простым узлом (‹h1›, ‹DIV›, ‹SPAN›), он будет принимать значение из объекта JSON и помещать его как содержимое элемента.
- Если HTML-элемент является элементом формы, он будет устанавливать значение, внутренний текст, проверять его, в зависимости от типа элемента.
- Если HTML-элемент является коллекцией (‹SELECT›, ‹TABLE›, ‹UL›), а объект - массивом, он автоматически клонирует элементы для каждого объекта в массиве.
Это чрезвычайно простой способ привязать ответы AJAX API к телу веб-страницы:
$.ajax({url:"api/region.js"}) .done(function(response){ $("#template").view(response); });
Итак, если у вас нет и / или вы не хотите иметь полноценный SPA, использование облегченной библиотеки, такой как эта, является практическим способом добиться цели.
JQuery View Engine - это небольшая бесплатная библиотека с открытым исходным кодом, которая может сэкономить ваше время. Если у вас такая же проблема, и вы думаете, что это поможет, попробуйте.