В этом уроке мы рассмотрим, как можно эффективно использовать систему бета-шаблонов jQuery, чтобы полностью отделить наш HTML от наших скриптов. Мы также кратко рассмотрим полностью обновленный модуль AJAX в jQuery 1.5.
Что шаблонизирует?
Шаблонирование — это новинка (она все еще находится в бета-версии, поэтому она может немного измениться по мере взросления и перехода к ядру, но она существует уже большую часть года), чрезвычайно мощная функция jQuery, позволяющая нам указать шаблон для использования при построении DOM-структур с помощью скрипта, что, я уверен, мы все делаем почти ежедневно.
Всегда было невероятно легко при использовании jQuery сделать что-то вроде этого:
|
1
2
3
|
$(«#someElement»).children().each(function() {
$(this).wrap($(«<div></div>»));
});
|
Шаблонирование позволяет нам удалить эти строковые фрагменты HTML из нашего поведения.
Это просто #someElement каждый дочерний элемент #someElement в новый элемент <div> . В этом нет ничего особенно плохого; это совершенно правильно и хорошо работает в бесчисленных ситуациях. Но в нашем скрипте есть HTML — контент смешивается с поведением. В приведенном выше простом примере это не такая уж большая проблема, но реальные сценарии могут содержать гораздо больше фрагментов HTML, особенно при построении структур DOM с данными, полученными с помощью запроса AJAX. Все это может быстро стать беспорядком.
Шаблонирование позволяет нам удалять эти фрагменты HTML на основе строк из нашего уровня поведения и надежно помещать их обратно на место, где они находятся в уровне содержимого. В то время как мы делаем это, мы также можем проверить одну из совершенно новых, крутых возможностей AJAX в jQuery 1.5 — отложенные объекты.
Начиная
В этом примере мы создадим виджет Twitter, который будет не только загружать некоторые из наших последних твитов, но также перечислять друзей, подписчиков и предложения. Я выбрал Twitter для этого примера, потому что он выводит JSON в нужном нам формате; это легко и весело.
Итак, начнем; Сам виджет будет построен из следующей базовой разметки:
|
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
|
<!DOCTYPE HTML>
<html>
<head>
<meta charset=»utf-8″>
<title>jQuery, AJAX and Templating</title>
<link rel=»stylesheet» href=»tweetbox.css»>
<!—[if lte IE 8]>
<script src=»http://html5shim.googlecode.com/svn/trunk/html5.js»></script>
<![endif]—>
</head>
<body>
<aside id=»tweetbox»>
<div id=»user»>
<h2><a href=»http://twitter.com/danwellman» title=»Visit Dan Wellman on Twitter»>Dan Wellman</a></h2>
<a href=»http://twitter.com/danwellman» title=»Dan Wellman»><img src=»img/me.png» alt=»Dan Wellman»></a>
<p>Husband, father, front-end developer and author.
</div>
<ul id=»tools»>
<li><a href=»#tweets» title=»Recent Tweets» class=»on»>Tweets</a></li>
<li><a href=»#friends» title=»Recent Friends»>Friends</a></li>
<li><a href=»#follows» title=»Recent Followers»>Followers</a></li>
</ul>
<div id=»feed»>
<div id=»tweets»>
<noscript>This widget has super-awesome features which require the use of JavaScript.
</div>
<div id=»friends»></div>
<div id=»follows»></div>
</div>
</aside>
<script src=»jquery.js»></script>
<script src=»jquery.tmpl.min.js»></script>
<script src=»tweetbox.js»></script>
</body>
</html>
|
Мы используем HTML5 и включили упрощенный элемент DOCTYPE и элемент meta charset . Мы ссылаемся на пользовательскую таблицу стилей, которую мы создадим в ближайшее время, и для поддержки текущих версий IE8 и ниже мы используем условный комментарий для ссылки на файл html5shiv размещенный в Google.
Используя в aside
Этот виджет, вероятно, перейдет на боковую панель и будет отличаться от фактического содержимого страницы, на которой он размещен, но связан с сайтом в целом. Имея это в виду, я чувствую, что <aside> является подходящим внешним контейнером в этом случае. Мы даем ему id для легкого выбора и стиля.
Продолжая нашу разметку, у нас есть некоторые подробности о пользователе Twitter, чьи твиты перечислены, включая имя в <h2> , изображение и биографию в стандартном <p> . Не стесняйтесь менять их на свои собственные данные при реконструкции примера. Мы могли бы получить все эти элементы из вызова JSON, который мы сделаем, когда будем запрашивать данные, однако, если при загрузке страницы будет небольшая задержка, посетитель может остаться уставленным на кучу пустых ящиков, поэтому жесткое кодирование этой информации в виджет снова уместно. Если бы мы создавали плагин для использования другими разработчиками, мы бы, конечно, не смогли этого сделать, но при добавлении этого на наш собственный сайт или сайт конкретного клиента это выполнимый подход.
Далее у нас есть вкладки, которые будут использоваться для переключения между твитами, друзьями и подписчиками. Они построены из простой коллекции элементов <ul> , <li> и <a> . Вкладка друзей будет отображаться по умолчанию, поэтому к ссылке на эту вкладку прикреплен класс. В более крупном проекте мы, конечно, могли бы использовать вкладки пользовательского интерфейса jQuery, но я не хотел, чтобы руководство теряло фокус, и нет смысла добавлять эту функцию вручную.
Обратите внимание, что мы также используем плагин — это плагин
tmpl(шаблонизатор), который дает нам возможность использовать шаблоны jQuery.
Наконец, у нас есть элементы, которые будут содержать каждый поток данных; у нас есть внешний контейнер с id feed и три контейнера для твитов, друзей и подписчиков соответственно, которые также имеют атрибуты id для легкого выбора. Мы также включаем элемент <noscript> для посетителей, у которых может быть отключен сценарий (если он вообще существует), который находится в области содержимого вкладки по умолчанию. Обратите внимание, что мы также используем плагин — это плагин tmpl (шаблонизатор), который дает нам возможность использовать шаблоны jQuery. Этот файл можно скачать здесь
Возьмите копию прямо сейчас и вставьте ее в ту же папку, что и веб-страница, которую мы только что создали.
Я упомянул пользовательскую таблицу стилей ранее; давайте добавим это прямо сейчас; в новом файле в вашем текстовом редакторе добавьте следующий код:
|
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
|
#tweetbox {
display:block;
border-radius:5px;
background-color:#eee;
}
#tweetbox img { display:block;
#user { margin-bottom:10px;
#user h2 { margin:0 0 10px 0;
#user img { float:left;
#user p { width:230px;
#user img { display:block;
#tools { margin:0;
#tools li { float:left;
#tools a {
display:block;
-moz-border-radius:5px 5px 0 0;
position:relative;
background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0.5, #E8E8E8), color-stop(0, #DBDBDB), color-stop(0.5, #D6D6D6));
background-image: -moz-linear-gradient(center top, #E8E8E8 50%, #DBDBDB 0%, #D6D6D6 50%);
}
a { text-decoration:none;
#tools .on { height:21px;
#feed { width:298px;
#feed > div { display:none;
noscript { display:block;
|
Сохраните этот файл как tweetbox.css в том же каталоге, что и страница HTML. Это всего лишь немного стиля макета для нашего виджета. Есть несколько тонкостей CSS3 для способных браузеров: некоторые действия с закругленными углами (обратите внимание, нам больше не нужен префикс –webkit- vendor для закругленных углов в последних браузерах webkit!) И некоторые градиенты для вкладок. Следует отметить, что мы скрываем все контейнеры в элементе feed, кроме одного с active классом. В этот момент (и с отключенным JS) виджет должен выглядеть так:
Добавление скрипта
Давайте соединим основной скрипт и приведем эти вкладки в действие. В другом новом файле в вашем текстовом редакторе добавьте следующий код:
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
|
(function($) {
//tabs
var tweetbox = $(«#tweetbox»),
tweetData = null,
friendData = null,
followData = null;
tweetbox.find(«#tools a»).click(function(e) {
e.preventDefault();
var link = $(this),
target = link.attr(«href»).split(«#»)[1];
tweetbox.find(«.on»).removeClass(«on»);
link.addClass(«on»);
tweetbox.find(«#feed > div»).hide();
tweetbox.find(«#» + target).show();
});
})(jQuery);
|
Сохраните этот файл как tweetbox.js в том же каталоге, что и страница HTML. Это все довольно просто, и, поскольку это не совсем основная тема этого урока, я не буду вдаваться в подробности. Все, что мы делаем, — это псевдоним строкового символа в анонимной функции, которую мы выполняем сразу — больше для хорошей практики, чем для чистой необходимости в этом примере — и затем кэшируем селектор для основного внешнего контейнера для виджета. Мы также инициализируем три переменные для последующего использования и устанавливаем их значения равными null .
Нам нужно будет повторно выбирать элементы по всему коду; поэтому кэширование ссылки на внешний контейнер помогает минимизировать количество объектов jQuery, которые нам нужно создать. Затем мы устанавливаем обработчик клика для ссылок вкладок, который получает id вкладки, который будет отображаться из ссылки, по которой щелкнули, удаляет имя класса из ссылок вкладок и затем добавляет его обратно к ссылке, по которой щелкнули. Затем мы скрываем все панели вкладок, прежде чем отображать выбранную панель вкладок.
Получение данных
Теперь начинается настоящее веселье; мы можем отправлять запросы в Twitter, чтобы получить наши три набора данных, и использовать шаблонный плагин jQuery для создания необходимых элементов 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
54
55
56
57
58
59
60
61
62
63
64
65
|
$.ajaxSetup({
dataType: «jsonp»
});
function getTweets() {
$.ajax(«http://api.twitter.com/statuses/user_timeline/danwellman.json», {
success: function(data) {
var arr = [];
for (var x = 0; x < 5; x++) {
var dataItem = {};
dataItem[«tweetlink»] = data[x].id_str;
dataItem[«timestamp»] = convertDate(data, x);
dataItem[«text»] = breakTweet(data, x);
arr.push(dataItem);
}
tweetData = arr;
}
});
}
function getFriends() {
return $.ajax(«http://api.twitter.com/1/statuses/friends/danwellman.json», {
dataType: «jsonp»,
success: function(data) {
var arr = [];
for (var x = 0; x < 5; x++) {
var dataItem = {};
dataItem[«screenname»] = data[x].screen_name;
dataItem[«img»] = data[x].profile_image_url;
dataItem[«name»] = data[x].name;
dataItem[«desc»] = data[x].description;
arr.push(dataItem);
}
friendData = arr;
}
});
}
function getFollows() {
return $.ajax(«http://api.twitter.com/1/statuses/followers/danwellman.json», {
dataType: «jsonp»,
success: function(data) {
var arr = [];
for (var x = 0; x < 5; x++) {
var dataItem = {};
dataItem[«screenname»] = data[x].screen_name;
dataItem[«img»] = data[x].profile_image_url;
dataItem[«name»] = data[x].name;
dataItem[«desc»] = data[x].description;
arr.push(dataItem);
}
followData = arr;
}
});
}
//execute once all requests complete
$.when(getTweets(), getFriends(), getFollows()).then(function(){
//apply templates
});
|
Во-первых, мы используем метод ajaxSetup() чтобы установить для параметра jsonp значение jsonp для всех последующих запросов. Так как это будет dataType используемый каждым из наших запросов, имеет смысл просто установить опцию один раз.
Затем мы определяем три стандартные функции; внутри каждой функции мы используем метод ajax() чтобы сделать запрос к веб-сервису, который возвращает каждый набор данных, с которыми мы будем работать, user_timeline , friends и followers соответственно. В объекте настроек для каждого запроса мы определяем обработчик success который будет выполняться после успешного возврата каждого отдельного запроса. Каждый из этих запросов будет возвращать объект JSON, который может содержать до 100 объектов, заполненных данными Twitter.
Чтобы гарантировать, что данные хранятся в правильном формате для JSON, мы используем обозначение в квадратных скобках.
Нам не нужно много данных, поэтому в каждом обработчике success мы создаем новый массив, который, в свою очередь, будет содержать серию объектов, содержащих только те данные, которые мы фактически собираемся использовать. Чтобы гарантировать, что данные хранятся в правильном формате для JSON, где каждое имя свойства должно быть строкой, мы используем обозначение в квадратных скобках, чтобы задать имена свойств в строковом формате.
Запрос user_timeline хранит id string твита, которую можно использовать как часть URL-адреса, указывающего на твит, а также сохраняет результат двух служебных функций. Первая из этих функций создает отформатированную строку данных, которая преобразует дату, возвращаемую Twitter, во что-то более красивое и локализованное на машине зрителя. Мы также форматируем текст твита, чтобы мы могли исправить любые @usernames, найденные в тексте. Мы вскоре рассмотрим функции форматирования даты и твита.
Функции для получения списков друзей и подписчиков в значительной степени идентичны. Опять же, мы переименовываем свойства, с которыми будем работать при создании наших объектов, и сохраняем их в каждом массиве. Все три наших обработчика успеха сохраняют полученные массивы из 5 элементов в null переменных, которые мы установили в верхней части скрипта.
Обратите внимание, что мы не вызываем каждую из наших getTweets() , getFriends() и getFollowers() вручную. Вместо этого мы используем метод new when() в jQuery, чтобы вызывать их все одновременно. Этот метод полностью обрабатывает выполнение этих функций и отслеживает, когда каждая из них вернулась. Мы связываем метод then() после метода when() . Как только все указанные функции вернутся успешно, будет выполнена функция обратного вызова, которую мы передадим методу then() .
Метод
when()создает отложенный объект, который управляет функциями, которые мы указываем в качестве аргументов.
Как только все функции возвращены, отложенный объект разрешается и вызываются все функции, зарегистрированные с помощью then() . Другие обработчики также могут быть связаны с отложенным объектом when() , таким как fail() , который будет выполнен, если одна или несколько функций, переданных отложенному объекту, будут неудачными.
Это невероятно; мы хотим сделать все три запроса, но у нас нет никакого способа узнать заранее, какой из них будет возвращен последним, поэтому невозможно использовать функцию обратного вызова какого-либо одного запроса, если мы хотим обработать данные, возвращенные всеми функциями в то же время. В прошлом нам, вероятно, пришлось бы устанавливать интервал, который бы неоднократно опрашивал каждую функцию, чтобы проверить, вернулась ли она, и подождать, пока все они не выполнили, прежде чем продолжить. Теперь мы можем делегировать все это ручное отслеживание jQuery для автоматической обработки.
Сервисные функции
В этом примере мы используем две служебные функции: convertDate() и breakTweet() . Код для этих функций выглядит следующим образом:
|
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
|
//format date
convertDate = function(obj, i) {
//remove time zone offset in IE
if (window.ActiveXObject) {
obj[i].created_at = obj[i].created_at.replace(/[+]\d{4}/, «»);
}
//pretty date in system locale
var days = [«Sun», «Mon», «Tue», «Wed», «Thu», «Fri», «Sat»],
date = new Date(obj[i].created_at),
formattedTimeStampArray = [days[obj[i].created_at], date.toLocaleDateString(), date.toLocaleTimeString()];
return formattedTimeStampArray.join(» «);
}
//format text
breakTweet = function(obj, i) {
//atify
var text = obj[i].text,
brokenTweet = [],
atExpr = /(@[\w]+)/;
if (text.match(atExpr)) {
var splitTweet = text.split(atExpr);
for (var x = 0, y = splitTweet.length; x < y; x++) {
var tmpObj = {};
if (splitTweet[x].indexOf(«@») != -1) {
tmpObj[«Name»] = splitTweet[x];
} else {
tmpObj[«Text»] = splitTweet[x];
}
brokenTweet.push(tmpObj);
}
} else {
var tmpObj = {};
tmpObj[«Text»] = text;
brokenTweet.push(tmpObj);
}
return brokenTweet;
}
|
Функция convertDate() относительно проста: сначала мы проверяем, является ли используемый браузер вариантом IE, ища window.ActiveXObject . Если это найдено, мы используем метод JavaScript replace() для удаления смещения часового пояса, предоставленного как часть строки, содержащейся в свойстве create_at объекта JSON, возвращаемого Twitter. Этот метод использует шаблон регулярного выражения для поиска и пустую строку для его замены. Это останавливает IE, засоряющий символ + когда строка передается new Date конструктору new Date .
Затем мы создаем некоторые переменные; мы устанавливаем массив, содержащий сокращенные имена дней, с воскресеньем (или солнцем) в качестве первого элемента в массиве. Дни в датах JavaScript начинаются с нуля, при этом воскресенье всегда отображается как день 0. Затем мы создаем объект Date с помощью new Date() и передаем строку даты, сохраненную в свойстве созданного_каталога объекта, который мы передали в функция.
Затем мы создаем другой массив, содержащий три элемента: первый элемент получает правильный день недели из первого массива, который мы создали в этой функции, следующий элемент получает локализованную дату, а последний элемент получает локализованное время. Наконец, мы возвращаем содержимое массива после того, как присоединились к нему. Мы могли бы просто использовать конкатенацию строк для построения этой строки даты, но объединение элементов массива происходит намного быстрее, чем создание строк вручную.
Функция breakTweet() немного сложнее. Нам нужно преобразовать простой текст в массив JSON, где каждый элемент массива является объектом, содержащим свойство Name или Text чтобы мы могли использовать данные с шаблоном (подробнее о шаблонах далее). Сначала мы сохраняем текст из объекта, возвращенного Twitter (который мы передаем в функцию). Мы также создаем пустой массив для хранения объектов и определяем регулярное выражение, которое будет соответствовать @usernames .
Затем мы проверяем текст, чтобы увидеть, содержит ли он какие-либо имена пользователей; если это так, то мы разделяем текстовую строку при каждом появлении имени пользователя. Это даст нам массив, который содержит элементы в виде простого текста или имени пользователя. Затем мы перебираем каждый элемент в этом массиве и проверяем, содержит ли каждый элемент символ @ ; если это так, мы знаем, что это имя пользователя, и сохраняем его в объекте с ключом Name . Если он не содержит символ @ мы сохраняем его с ключом Text . Затем объект помещается в массив. Также, если весь текст не содержит символа @ мы сохраняем его с ключом Text .
Это оно; как только мы сохранили наши объекты, функция возвращает новый массив user_timeline функцию успеха user_timeline и сохраняется в главном объекте JSON для использования с нашими шаблонами. Помимо исправления текста, мы также можем ссылаться и хешировать, если захотим. Я оставлю это на ваше усмотрение.
шаблонирование
Теперь, когда у нас есть обработанные данные JSON, мы можем перейти к заключительной части примера: шаблонированию. В анонимной функции, переданной методу then() в последнем разделе кода, был комментарий и больше ничего. Сразу после этого комментария добавьте следующий код:
|
1
2
3
4
5
6
7
|
//apply templates
tweetbox.find(«#tweetTemplate»).tmpl(tweetData).appendTo(«#tweetList»);
tweetbox.find(«#ffTemplate»).tmpl(friendData).appendTo(«#friendList»);
tweetbox.find(«#ffTemplate»).tmpl(followData).appendTo(«#followList»);
//show tweets
tweetbox.find(«#tweets»).show();
|
Этот код просто применяет шаблоны с использованием метода плагинов шаблонов jQuery tmpl() . Метод принимает JSON, содержащий данные, которые будет использовать шаблон. Затем мы указываем, где в документе вставить элементы шаблона. Каждый набор шаблонов добавляет элементы в соответствующий пустой контейнер в виджете. Метод tmpl() вызывается для трех элементов, но эти элементы еще не существуют. Мы добавим их дальше.
Добавление шаблонов jQuery
Вернитесь к HTML и сначала добавьте следующий элемент <script> сразу после пустого <ul> с идентификатором tweetList :
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
|
<script id=»tweetTemplate» type=»text/x-jquery-tmpl»>
<li>
<p>
{{each text}}
{{if Name}}
{{tmpl(Name) «#atTemplate»}}
{{else}}
${Text}
{{/if}}
{{/each}}
<a class=»tweet-link» href=»http://twitter.com/danwellman/status/${tweetlink}»>${timestamp}</a>
</p>
</li>
</script>
<script id=»atTemplate» type=»text/x-jquery-tmpl»>
<a href=»http://twitter.com/${$item.data}»>${$item.data}</a>
</script>
|
Шаблоны jQuery добавляются на страницу HTML с использованием элементов <script> . Для этих элементов должны быть установлены атрибуты id чтобы их можно было выбирать, и чтобы к ним tmpl() метод tmpl() . На них также должен быть установлен пользовательский тип x-jquery-tmpl .
В первом шаблоне мы добавляем разметку, из которой мы хотим построить новую структуру DOM, которая в данном случае представляет собой <li> , <p> и <a> для создания каждого твита. Чтобы вставить данные из объекта JSON, переданные в метод tmpl() мы используем серию шаблонных тегов. Сначала мы используем тег {{each}} чтобы просмотреть каждый элемент в text массиве.
Это массив, содержащий разбитый твит, поэтому для каждого объекта мы проверяем, есть ли у него ключ Name ; если это так, мы используем тег {{tmpl}} , который позволяет нам использовать вложенный шаблон. Мы указываем данные для передачи вложенной функции в круглых скобках после тэга tmpl а также указываем id шаблона для выбора (это второй шаблон, который мы только что добавили, и мы рассмотрим его более подробно чуть tmpl ). Если объект не содержит свойства Name , мы знаем, что имеем дело с текстовой частью твита и просто вставляем данные, используя ${Text} . Это условие достигается с помощью тега шаблона {{else}} . Мы также должны закрыть условие, используя {{/if} , и закрыть итерацию, используя {{/each}} .
Наконец, мы создаем новый элемент привязки, который напрямую ссылается на твит на веб-сайте Twitter, используя ${tweetlink} как часть свойств href и ${timestamp} . Эти свойства мы создали в обработчике успеха для запроса user_timeline .
В atTemplate мы также создаем ссылку; на этот раз он ссылается на пользователя, который был упомянут. Поскольку это вложенный шаблон, нам нужно получить доступ к фактическим данным немного по-другому; данные, переданные во вложенный шаблон тегом {{tmpl} будут сохранены в свойстве объекта $item называемого data .
Нам все еще нужно добавить шаблон для вкладок наших друзей и подписчиков. Оба они будут построены из одного шаблона, который должен быть следующим:
|
1
2
3
4
5
6
7
8
9
|
<script id=»ffTemplate» type=»text/x-jquery-tmpl»>
<li>
<p>
<a class=»img-link» href=»http://twitter.com/${screenname}»><img src=»${img}» alt=»${name}»></a>
<span class=»username»><a href=»http://twitter.com/${screenname}»>${screenname}</a>
<span class=»bio»>${desc}
</p>
</li>
</script>
|
Этот шаблон намного проще, поскольку мы не используем вложенные шаблоны и не выполняем никаких итераций, мы просто вставляем данные из каждого массива JSON, используя формат элемента шаблона ${data} .
Заканчивать
Теперь, когда мы применили шаблоны и заполнили наш виджет, мы можем добавить еще несколько стилей CSS, чтобы привести в порядок новые элементы, которые были добавлены; в tweetbox.css добавьте следующий код в конец файла:
|
1
2
3
4
5
6
7
8
9
|
#feed ul { padding:0;
#feed li { padding:0;
#feed li:last-child, #feed li:last-child p { border-bottom:none;
#feed p { padding:10px;
#feed p:after { content:»»;
.tweet-link { display:block;
.img-link { display:block;
#feed .username a { font-size:14px;
#feed .bio { display:block;
|
Сохраните файл, теперь наша страница должна выглядеть следующим образом:
Есть еще одна вещь, которую мы, вероятно, должны сделать: в настоящее время наша функция форматирования твитов не работает в IE из-за того, как IE обрабатывает метод регулярного выражения split() . Чтобы исправить эту проблему, мы можем использовать отличный патч JavaScript, созданный Стивеном Левитаном. Его можно скачать по адресу: http://blog.stevenlevithan.com/archives/cross-browser-split и включить в страницу с помощью условного комментария так же, как мы добавили файл html5shiv :
|
1
2
3
|
<!—[if IE]>
<script src=»fixSplit.js»></script>
<![endif]—>
|
Это должно быть добавлено непосредственно перед ссылкой скрипта на наш файл tweetbox.js .
Резюме
В этом уроке мы рассмотрели некоторые более продвинутые функции шаблонизации jQuery, такие как итерация элементов с {{each}} и условные выражения с {{if}} и {{else}} .
Ключевым моментом является то, что новая система шаблонов от jQuery позволяет нам лучше разделять слои поведения и представления, перемещая все фрагменты HTML-кода из файла
.jsи обратно в файл.html.
Некоторые могут возразить, что сейчас у нас просто противоположная ситуация, и на нашей странице просто есть больше <script> .
Тем не менее, я думаю, что это бесконечно предпочтительнее альтернативы. Элементы в формате $("<div>") — это просто строки без неявного значения (до тех пор, пока браузер не выполнит jQuery и не создаст и не вставит в DOM).
Мы также рассмотрели превосходный новый метод when() предоставленный в jQuery 1.5, который позволяет нам управлять набором асинхронных запросов и выполнять код после их завершения. Это включает использование метода then() для указания функции, которая будет выполняться после того, как все асинхронные функции будут возвращены.
Большое спасибо за чтение и дайте мне знать, если у вас есть какие-либо вопросы!