Geeks With Blogs
Caffeinated Geek Honestly! The dog ate the tax return...

Most of the tutorials and quickstart articles on binding data to a list on the interweb at the moment, shows how to bind the data from a static array of data.
I assume that this does have some actual benefits, however to be honest, if I'm using static data already, why bind it? Anyways, that’s neither here nor there..

   1:  var someData = [     
   2:          { someKey: "key1", someTitle: "title1", somethingElse: "somethingElse1"},     
   3:          { someKey: "key2", someTitle: "title2", somethingElse: "somethingElse2"},     
   4:          { someKey: "key3", someTitle: "title3", somethingElse: "somethingElse4"},     
   5:          { someKey: "key4", someTitle: "title4", somethingElse: "somethingElse5"},     
   6:          { someKey: "key5", someTitle: "title5", somethingElse: "somethingElse6"}
   7:  ];

What i want to show quickly is how to retrieve data from an external source (I'll use Scott Guthrie's blog as an example here and consume the RSS feed, the principle is the same for pretty much any other type of structured data) and bind it to a list.

First the setup..

Create a new project

We’re all set, lets get cracking and start up Visual Studio 2012 RC. As a side note, I’ve grown really fond of VS2012 to be honest. It’s fast and functional where I need it to be.

So, CTRL+SHIFT+N…(that’s the short cut for a new project btw).

Scroll down and expand the “JavaScript” templates and select “Windows Store” – yes, i know, it’s no longer called Metro…Select a blank application…


Give it a name, location and solution name…I’m such a separatist so I’ve gotten into the habit of storing my projects in a SkyDrive synched folder…why? well because I hate loosing work when a HD dies and/or I forget its there and deletes it.


CTRL+F5..lets just see if it’ll run to start with. Good to go after that.

Setup the binding controls

First things first, lets look at our template. Open up the default.html file and lets take a look at it’s meagre contents…

Nothing interesting in there for now, except for the added javascript and stylesheet references.

   1:  <!DOCTYPE html>
   2:  <html>
   3:  <head>
   4:      <meta charset="utf-8" />
   5:      <title>ListViewBinding</title>
   7:      <!-- WinJS references -->
   8:      <link href="//Microsoft.WinJS.1.0/css/ui-dark.css" rel="stylesheet" />
   9:      <script src="//Microsoft.WinJS.1.0/js/base.js"></script>
  10:      <script src="//Microsoft.WinJS.1.0/js/ui.js"></script>
  12:      <!-- ListViewBinding references -->
  13:      <link href="/css/default.css" rel="stylesheet" />
  14:      <script src="/js/default.js"></script>
  15:  </head>
  16:  <body>
  17:      <p>Content goes here</p>
  18:  </body>
  19:  </html>

Leave those there as they’ll help building your Metro…ahem…“Windows Store” application.

Remove the <p>Content goes here</p> paragraph and include the following..

   1:     <!-- Binding template -->
   2:       <div data-win-control="WinJS.Binding.Template">        
   3:          <div>
   4:              <h4 data-win-bind="textContent: title"></h4>                     
   5:          </div>
   6:      </div>

That's our template for each item we display in the list. The key is the choice of control...WinJS.Binding.Template.

Next step for us is to create the ListView…here the choice of control will be the WinJS.UI.ListView which is shown below.

   1:      <!-- Binding Control -->
   2:      <section aria-label="Main content" role="main">
   3:          <div id="articlelist" data-win-control="WinJS.UI.ListView"></div>
   4:      </section>

We now have the two most important aspects ready – the Binding Template and the UI ListView control. All’s very simple so far.

As mentioned earlier, the static list binding scenarios are pretty useless, except for giving you some good data to start with. What we’ll do here is to grab information from a RSS feed (very common and quite easily done) – this could of course be anything.

Get the data

So, create a new JavaScript file – call it FeedData.js – CTRL+SHIFT+A (shortcut for add new item).

Here’s where the meat of the work is done.

   1:  (function () {
   2:      "use strict";
   4:      var feed = "";
   6:      function GetArticleList() {
   7:          WinJS.xhr({ url: feed }).then(function (rss) {
   8:              var items = rss.responseXML.querySelectorAll("item");
  10:              for (var i = 0; i < items.length; i++) {
  11:                  var article = {};
  12:                  article.title = items[i].querySelector("title").textContent;
  14:                  articleList.push({ title: article.title });
  15:              }
  16:          })
  17:      }; 
  19:      var articleList = new WinJS.Binding.List();
  20:      var listItems = { ItemList: articleList };
  22:      WinJS.Namespace.define("ArticleData", {
  23:          Items: articleList,
  24:          ArticleList: GetArticleList,        
  25:      });
  27:  })();

The areas to take note of here are the feed variable that’s declared – this contains the target URL for Scott Guthrie’s RSS feed.

Secondly, the GetArticletList() function. We’re using WinJS.xhr to extract the RSS feed and simply extract the content from the XML in the feed itself, then push that content into the articleList.

The important aspects here is the “title” property which we are assigning.

   1:  articleList.push({ title: article.title });

this is the same “title” property that we’re specifying in our Binding Template.

   1:  <div>
   2:       <h4 data-win-bind="textContent: title"></h4>                     
   3:  </div>

Bind the data

Finally, we need to bind the data. This is done in two steps – assign the item datasource to the ListView and include a few lines of JavaScript in the default.js file.

Here’s how we assign the datasource to the ListView. Go back into the default.html file and locate the WinJS.UI.ListView control and add the following to it.

   1:  data-win-options="{ itemDataSource: ArticleData.Items.dataSource, selectionMode: 'none'}"

This specifies the datasource as ArticleData.Items.dataSource and that’s the WinJS.Binding.List we defined in the FeedData.js file.

Now open up the default.js and add the following JavaScript…

   1:  (function () {
   2:      "use strict";
   4:      WinJS.UI.Pages.define("/default.html", {
   5:          initialiseLayout: function (listView, viewState) {
   6:              ArticleData.ArticleList();
   7:              listView.layout = new WinJS.UI.GridLayout();
   9:          },
  10:          itemInvoked: function (args) {
  12:          },
  13:          ready: function (element, options) {
  14:              var listview = element.querySelector(".articlelist").winControl;
  15:              listview.itemTemplate = element.querySelector(".articletemplate");
  17:              this.initialiseLayout(listview, null);
  18:              WinJS.UI.processAll();
  19:          }
  20:      });
  22:  })();

Do remember to always call processAll() after all your binding is done…

That’s it…Fairly simple really

Posted on Wednesday, August 22, 2012 1:03 AM Development | Back to top

Comments on this post: Windows 8–Getting started with ListView binding

No comments posted yet.
Your comment:
 (will show your gravatar)

Copyright © CSharpZealot | Powered by: