Создание виджета Twitter с использованием Distal

Давайте вернемся к HTML и отметим, какие данные куда идут. Сначала мы отметим строку таблицы, которую нужно повторить для того, сколько у нас есть твитов. Мы будем использовать атрибут data-qrepeat

  <table id = "twitter_box">
   <tr data-qrepeat = "twt results">
     (Усечены)
   </ TR>
 </ Table> 

Здесь мы говорим Distal повторить элемент строки на основе массива с именем «results», найденного в объекте JSON. И для каждого элемента в этом массиве он будет представлен переменной «twt» (для твита).

Далее мы сообщаем Distal, где разместить твит-сообщение, дату и имя пользователя. Мы будем использовать атрибут data-qtext

  <table id = "twitter_box">
   <tr data-qrepeat = "twt results">
     <TD>
       <img border = "0" /> <div class = "name" data-qtext = "twt.from_user"> </ div>
     </ TD>
     <TD>
       <div class = "txt" data-qtext = "twt.text"> </ div>
       <div class = "date" data-qtext = "twt.created_at"> </ div>
     </ TD>
   </ TR>
 </ Table> 

Когда запускается Distal, он помещает значения этих свойств в узел HTML.

Далее мы сообщаем Distal, что в качестве атрибута источника изображения указывается URL-адрес аватара, представленный именем свойства объекта JSON «profile_image_url». Мы используем атрибут data-qattr

  <TD>
   <img border = "0" data-qattr = "src twt.profile_image_url" />
 </ TD> 

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

Теперь нам нужно подключить нашу функцию обратного вызова Twitter к Distal. Мы делаем это, определяя нашу функцию обратного вызова, которую вызывает Twitter, и внутри функции обратного вызова мы передаем данные JSON в Distal.

Чтобы вызвать Distal, нам нужно предоставить два аргумента. Первый — это узел, где должны быть размещены наши данные, второй — данные из твиттера:

  function searchTwitterCallback (response) {
   var node = document.getElementById ("twitter_box");
   дистальный (узел, ответ);
 } 

Теперь у нас есть функция для вызова Twitter, функция обратного вызова для вызова Twitter, и мы помещаем данные в шаблон HTML. Теперь нам нужен способ вызова функции Twitter при загрузке веб-страницы. В нижней части вашей веб-страницы, но перед конечным тегом body

  <Скрипт> searchTwitter (); </ скрипт> 

Теперь загрузите веб-страницу в браузере и посмотрите, как она выглядит.

Он работает нормально, но внешний вид немного скучный, так как мы еще не украсили его CSS. Мы можем оставить это как упражнение на потом, но пока что я добавлю немного стиля CSS, чтобы спасти мои глаза.

  <style type = "text / css">
   #twitter_box {font: normal 10pt Arial;  выравнивание текста: центр}
   #twitter_box td {vertical-align: top;  набивка: 0,4em 0,4em 0,2em 0,4em;  background: #eee}
   #twitter_box .name {font-size: 8pt}
   #twitter_box .txt {text-align: left;  font-style: italic}
   #twitter_box .date {text-align: left;  размер шрифта: 8pt;  цвет: # 999}
 </ Стиль> 

Поле даты также выглядит довольно длинным и многословным. Давайте сократим это, сохранив дату и убрав время. Мы изменим функцию обратного вызова и пройдемся по объекту JSON, а также изменим свойство date на более короткое.

  function searchTwitterCallback (response) {
   var list = response.results;
   for (var i = 0; i <list.length; i ++) {
     list [i] .created_at = новая дата (list [i] .created_at) .toLocaleDateString ();
   }
   var node = document.getElementById ("twitter_box");
   дистальный (узел, ответ);
 } 

Теперь снова загрузите веб-страницу в браузере и посмотрите, как она выглядит.

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

Больше информации о DISTAL и языке атрибутов шаблона:

• FAQ — Динамический интерфейс, упрощенный с языком атрибутов шаблона
• Язык атрибутов шаблона
• Zope Page Шаблоны — Грок
• Шаблоны страниц Zope Простой учебник