Шаблон JavaScript ting

редактировать

Шаблон JavaScript относится к клиентской стороне метод привязки данных, реализованный с помощью Язык JavaScript. Этот подход стал популярным благодаря более широкому использованию JavaScript, его расширенным возможностям обработки клиентов и тенденции передавать вычисления клиентскому веб-браузеру. Популярные библиотеки шаблонов JavaScript: AngularJS, Backbone.js, Ember.js, Handlebars.js, Vue.js и Mustache.js. Частой практикой является использование двойных фигурных скобок (т.е. {{key}}) для вызова значений заданного ключа из файлов данных, часто объектов JSON.

Примеры

Во всех примерах используется внешний файл presnts.jsonсо следующим содержимым

{"президенты": [{"name": "Вашингтон", " имя ":" Джордж "," рожденный ":" 1732 "," смерть ":" 1799 "}, {" имя ":" Линкольн "," имя ":" Авраам "," рожденный ":" 1809 "," death ":" 1865 "}]}

Все примеры будут производить следующий HTML-список :

  • Вашингтон (1732-1799)
  • Линкольн (1809-1865)
БиблиотекаКод HTMLПояснение

Шаблон ДНК

➊ Наши любимые президенты: 
  • $ {name} ($ {born} - $ {death})
➋ ➌

➊ Загрузите необходимые ресурсы, включая требуемый jQuery. ➋ HTML-код с пометкой атрибута templateдля каждого подшаблона и заменой z-varинструкции.. ➌ Загрузите данные JSON из presnts.jsonи примените данные к шаблону HTML с атрибутом id «target».

Mustache.js

➊ Наши любимые президенты: 
    ➋ ➌ ➍

    ➊ Загрузите необходимые библиотеки, здесь mustache.js и jQuery. ➋ HTML-код предоставляет «цель» для вставки сгенерированного содержимого.. ➌ Предоставьте шаблон с именем "президент-шаблон".. ➍ Последняя - это функция, которая собирает данные JSON и для каждого подэлемента президента захватывает один шаблон и заполняет его, чтобы, наконец, выбрать целевую HTML-страницу, добавив к ней целое.

    Создание шаблонов становится полезным, когда распространяемая информация может измениться, слишком велика, чтобы ее можно было поддерживать на различных HTML-страницах с помощью доступных человеческих ресурсов, и недостаточно велика, чтобы требовать более сложных шаблонов на стороне сервера.

    См. Также
    Ссылки
    Последняя правка сделана 2021-05-24 03:56:32
    Содержание доступно по лицензии CC BY-SA 3.0 (если не указано иное).
    Обратная связь: support@alphapedia.ru
    Соглашение
    О проекте