Создание приложения для Windows 8 с HTML5: как создать небольшую программу для чтения RSS

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

Откройте « default.html » и внутри тега section введите этот фрагмент HTML:

  <div id = "articlelist" data-win-control = "WinJS.UI.ListView"> </ div> 

В настоящее время это всего лишь простой классический div Однако он снабжен атрибутом data-win-controlWinJS для преобразования этого простого div в элемент управления JavaScript ListView .

Эта операция выполняется благодаря волшебной строке кода JavaScript, которую вы найдете в default.js Вот:

  WinJS.UI.processAll (); 

Эта асинхронная операция проанализирует DOM, чтобы найти все элементы, помеченные атрибутами data-win-control Если вы удалите эту строку по ошибке, все ваши divdiv

Теперь нам нужно заполнить этот ListView некоторыми данными, полученными из RSS-канала. В функции привязки к событию onactivatedprocessAll()

  articleList = новый WinJS.Binding.List ();
 var publicMembers = {ItemList: ArticlesList};
 WinJS.Namespace.define ("C9Data", publicMembers); 

Затем вам нужно будет объявить переменную articleList в верхней части функции, например, под articlesList

Здесь мы объявляем тип Binding.List () . Этот тип используется для привязки ваших данных к элементам управления WinJS. Он содержит, например, некоторые методы, которые помогут вам добавить некоторые данные в фоновом режиме и благодаря механизму привязки; это будет отражено в представлении автоматически.

Более того, вы, возможно, заметили, что мы используем некоторый чистый код JavaScript, используя современные шаблоны, такие как, например, « шаблон модуля ». Для этого в app Затем нам нужно найти способ предоставить некоторые общедоступные данные внешним функциям. Вот почему мы реализуем концепцию пространства имен в связанном помощнике WinJS. Это помогает нам легко определить, что мы хотели бы раскрыть. В нашем случае у нас будет открытый объект default.jsC9Data

Теперь нам нужна функция, которая будет сортировать данные из RSS-канала, анализировать их и создавать на лету некоторые объекты JS, чтобы поместить их в знаменитый список привязок. Вот мой:

  function downloadC9BlogFeed () {
 WinJS.xhr ({url: "http://channel9.msdn.com/coding4fun/articles/RSS"}). Then (function (rss) {

 });
 } 

Эта функция начинается с запуска асинхронного XmlHttpRequest с указанным URL. Код, определенный в Promise (в ItemList Тогда нам нужно отфильтровать данные через этот фрагмент кода, который вы должны вставить в анонимную функцию:

  var items = rss.responseXML.querySelectorAll ("item");

 для (var n = 0; n <items.length; n ++) {
     var article = {};
     article.title = items [n] .querySelector ("title"). textContent;
     var thumbs = items [n] .querySelectorAll ("thumbnail");
     if (thumbs.length> 1) {
         article.thumbnail = thumbs [1] .attributes.getNamedItem ("url"). textContent;
         article.content = items [n] .textContent;
         articlesList.push (статья);
     }
 } 

Я надеюсь, что этот код будет самоочевидным. Он выбирает узлы .then()itemtitlethumbs Пожалуйста, имейте в виду название этих свойств; мы будем использовать их позже. Наконец, эта функция завершает добавление этого нового объекта в коллекцию привязок.

Теперь нам нужно запустить эту функцию на начальном этапе нашего приложения. Этот код должен запускаться после анализа DOM для создания элементов управления WinJS. Итак, чтобы сделать это, используйте эту строку кода:

  WinJS.UI.processAll (), а затем (downloadC9BlogFeed). 

  <div id = "articlelist" data-win-control = "WinJS.UI.ListView" 
 data-win-options = "{itemDataSource: C9Data.ItemList.dataSource}"> </ div> 

  #articlelist {
     ширина: 100%;
     высота: 100%;
 }

 #articlelist .win-item {
     ширина: 150 пикселей;
     высота: 150 пикселей;
 } 

  <div id = "C9ItemTemplate" data-win-control = "WinJS.Binding.Template" style = "display: none;"> <div> <div> <img data-win-bind = "src: thumbnail" /> </ div> <div data-win-bind = "innerText: title"> </ div> </ div> </ div> 

  <div id = "articlelist" data-win-control = "WinJS.UI.ListView" 
 data-win-options = "{itemDataSource: C9Data.ItemList.dataSource, itemTemplate: C9ItemTemplate}"> 
 </ DIV>