Статьи

Совет: работа с официальным плагином шаблонов jQuery

Март 21, 2019

Только на этой неделе команда jQuery объявила, что шаблонный плагин Microsoft (наряду с парой других) теперь официально поддерживается. Это означает, что плагин теперь будет обслуживаться и обновляться непосредственно основной командой. В этом видеоуроке мы рассмотрим основы плагина и почему он так хорош .

В качестве быстрого примера мы снова обратимся к примеру API поиска в Твиттере от пятницы ( вспомним Бибера ). Единственное отличие состоит в том, что на этот раз мы будем использовать шаблон HTML для прикрепления возвращаемых данных, а не путать наш JavaScript!

Несколько месяцев назад Эндрю Берджесс представил вам этот плагин , все еще в бета-версии. Однако сегодня мы интегрируем плагин в реальный код.


Подпишитесь на нашу страницу YouTube, чтобы посмотреть все видеоуроки!

Ускоренный курс

Шаг 1 : Импортируйте jQuery и плагин шаблонов

1
2
<script src=»http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js»></script>
<script src=»jquery.tmpl.js»></script>

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

01
02
03
04
05
06
07
08
09
10
<script id=»tweets» type=»text/x-jquery-tmpl»>
    <li>
        <img src=»${imgSource}» alt=»${username}» />
        <h2> ${username} </h2>
        <p> ${tweet} </p>
        {{if geo}}
        <span> ${geo}
        {{/if}}
    </li>
</script>
  • Обратите внимание, как этот шаблон заключен в теги script и что был применен type text/x-jquery-tmpl .
  • Мы ссылаемся на имена переменных шаблона, добавляя знак доллара и заключая имя свойства в фигурные скобки.
  • If операторы могут быть созданы с использованием двух наборов фигурных скобок, как показано выше. (Смотрите скринкаст для более подробной информации.)

Шаг 3 : Найдите данные для рендеринга!

В этом случае мы сделаем быстрый поиск по API поиска в Twitter.

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
<script>
 
 $.ajax({
    type : ‘GET’,
    dataType : ‘jsonp’,
    url : ‘http://search.twitter.com/search.json?q=nettuts’,
 
    success : function(tweets) {
       var twitter = $.map(tweets.results, function(obj, index) {
          return {
             username : obj.from_user,
             tweet : obj.text,
             imgSource : obj.profile_image_url,
             geo : obj.geo
          };
       });
    }
});
 
</script>

Спасибо Peter Galiba (см. Комментарии), за то, что порекомендовали более элегантное решение $.map , показанное выше.

Обратитесь к скринкасту для полного ознакомления с кодом выше. Но самое главное, что мы создаем массив объектов. Затем они будут служить данными для шаблона, который мы создали на втором шаге. Обратите внимание, как имена свойств:

1
2
3
4
username : obj.from_user,
tweet : obj.text,
imgSource : obj.profile_image_url,
geo : obj.geo

… соответствуют шаблонным переменным, которые мы создали на втором шаге.

Шаг 4 : Где должна быть сделана разметка?

Далее мы должны указать, где должна быть представлена ​​разметка и данные. Для этого мы создадим неупорядоченный список.

1
<ul id=»tweets»> </ul>

Шаг 5 : визуализация данных

Наконец, мы присоединяем данные к шаблону и добавляем их в неупорядоченный список (#tweets), который мы создали на четвертом шаге.

1
$(‘#tweets’).tmpl(twitter).appendTo(‘#twitter’);
  1. Найдите элемент script (шаблона) с id твитов .
  2. Прикрепите массив twitter к этому шаблону.
  3. Добавьте новую разметку в DOM.

Окончательный источник

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
<!DOCTYPE HTML>
<html lang=»en»>
   <head>
      <meta charset=»UTF-8″>
      <title></title>
      <link rel=»stylesheet» href=»style.css» />
 
      <script src=»http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js»></script>
      <script src=»jquery.tmpl.js»></script>
   </head>
   <body>
 
      <h1> Tweets about Nettuts+ </h1>
 
      <script id=»tweets» type=»text/x-jquery-tmpl»>
         <li>
            <img src=»${imgSource}» alt=»${userName}» />
            <h2> ${username} </h2>
            <p> ${tweet} </p>
 
            {{if geo}}
            <span>
               ${geo}
            
            {{/if}}
         </li>
      </script>
 
      <ul id=»twitter»></ul>
 
      <script>
         $.ajax({
            type : ‘GET’,
            dataType : ‘jsonp’,
            url : ‘http://search.twitter.com/search.json?q=nettuts’,
 
            success : function(tweets) {
               var twitter = $.map(tweets.results, function(obj, index) {
                  return {
                     username : obj.from_user,
                     tweet : obj.text,
                     imgSource : obj.profile_image_url,
                     geo : obj.geo
                  };
               });
 
               $(‘#tweets’).tmpl(twitter).appendTo(‘#twitter’);
            }
      });
 
      </script>
   </body>
</html>

Так что ты думаешь?

Теперь, когда шаблонный плагин официально поддерживается основной командой jQuery, будете ли вы использовать его в своих будущих проектах?

31
Share: