Статьи

Использование библиотеки шаблонов усов

Март 26, 2019

Некоторое время назад я показал вам, как использовать плагин шаблона jQuery в кратком совете; В этом кратком совете я покажу вам, как использовать другую библиотеку шаблонов, Усы , которая так же проста в использовании.

Полный скринкаст

Шаг 1: Загрузите Усы

Вы можете получить Mustache.js со страницы проекта GitHub; если вы собираетесь использовать его в проекте, вы можете скачать его или сделать git clone ; Я только что сослался на необработанный файл на GitHub для этого быстрого совета:

1
<script src=»http://github.com/janl/mustache.js/raw/master/mustache.js»></script>

Теперь вы можете использовать его для отображения данных!

Шаг 2: Получите ваши данные

Скорее всего, вы будете получать данные с сервера в виде JSON, когда вы используете Mustache в работе. Тем не менее, так же легко жестко кодировать объектный литерал и использовать его, что мы и сделаем здесь.

01
02
03
04
05
06
07
08
09
10
11
var data = {
    name : «Some Tuts+ Sites»,
    sites: [«Nettuts+», «Psdtuts+», «Mobiletuts+»],
    url : function () {
        return function (text, render) {
            text = render(text);
            var url = text.trim().toLowerCase().split(&#39;tuts+&#39;)[0] + &#39;.tutsplus.com&#39;;
            return &#39;<a href=»&#39; + url + &#39;»>&#39;
        }
    }
};

Теперь мы готовы определить шаблон.

Шаг 3: Создайте свой шаблон

Ваш шаблон просто строка; вы можете либо использовать обычную старую строку JavaScript, либо вы можете поместить шаблон в тег скрипта и получить его с помощью чего-то вроде метода html() jQuery (или, конечно, innerHTML ). Вероятно, это лучший выбор, если вы используете сложный шаблон, потому что вы можете использовать разрывы строк. Просто не забудьте дать сценарию тип чего-то кроме «text / javascript»; в противном случае браузеры могут попытаться его интерпретировать, что приведет к ошибкам.

Ваш шаблон будет в основном HTML; если вы хотите использовать значение из ваших данных, укажите имя ключа значения в данных. Чтобы использовать значение name в данных выше, вы должны ссылаться на него следующим образом:

1
<h1> {{name}} </h1>

Блоки — это важная часть усов: вы можете использовать их для проникновения внутрь массивов и объектов, а также для лямбд (функций). Сделать блоки довольно просто: просто используйте открывающий и закрывающий тег: открывающий начинается с фунта (#), а закрывающий — с косой чертой (/).

1
2
3
4
5
6
7
<ul>
    {{#sites}}
   
        <li> {{.}} </li>
   
    {{/sites}}
</ul>

При переборе массивов неявный оператор ”.” Возвращает вам значение. Если бы sites были объектом, вы бы использовали их ключи внутри блока.

Использование функций немного сложнее. Для части данных Mustache.js требуется функция, которая возвращает используемую функцию. Эта функция передает переданный текст (весь текст внутри тегов функции усов) и функцию, которая будет визуализировать теги шаблона внутри текста. Затем все, что возвращает эта функция, будет помещено в теги. Вы можете увидеть это на работе в функции urls в данных выше.

Шаг 4. Визуализация HTML

Это действительно просто отрендерить HTML:

1
html = Mustache.to_html(template, data);

Затем вы можете прикрепить этот HTML-код куда угодно.

Полный Источник 

  
 var data, template, html; 
  
 данные = { 
     название: "Некоторые сайты + сайты", 
     сайты: ["Nettuts +", "Psdtuts +", "Mobiletuts +"], 
     url: function () { 
         функция возврата (текст, рендер) { 
             текст = визуализация (текст); 
             var url = text.trim (). toLowerCase (). split ('tuts +') [0] + '.tutsplus.com'; 
             return '<a href="' + url +'">' + text + '</a>'; 
         } 
     } 
 }; 
  
 шаблон = " 
 <h1> {{name}} </ h1>  
 <ul> {{#sites}} 
 <li> {{#url}} {{.}} {{/ url}} </ li>  
  
  {{/ sites}} </ ul>  
  
 «; 
  
 html = Mustache.to_html (шаблон, данные); 
  
 document.write (HTML)

Чтобы узнать больше об усах, посетите веб-сайт . Веселитесь с этим!

35
Share: