WinJS - Test

by rarteaga

HTML

<link rel="stylesheet" href="http://try.buildwinjs.com/lib/winjs/css/ui-light.css">
<!-- WinJS references -->
<script src="http://try.buildwinjs.com/lib/winjs/js/base.min.js?v1.0.70"></script>
<script src="http://try.buildwinjs.com/lib/winjs/js/ui.min.js?v1.0.70"></script>
    

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

    <header id="banner">
        <button id="backbutton" class="win-backbutton">
        </button>
        <h1 id="maintitle" class="win-title">CSS-Tricks</h1>
    </header>
    <section id="content">
        <div id="articlelist" data-win-control="WinJS.UI.ListView" data-win-options="{ itemDataSource: C9Data.ItemList.dataSource, itemTemplate: C9ItemTemplate }"></div> 
           <div id="articlecontent"></div>
    </section>
</div>

JavaScript

//this is default.js
    
(function () {
    "use strict";

     debugger;
    WinJS.Binding.optimizeBindingReferences = true;

    var app = WinJS.Application;
    //var activation = Windows.ApplicationModel.Activation;
    var articlesList;

    app.onactivated = function (args) {
        
        debugger;
            
        var articlelistElement = document.getElementById("articlelist");
            articlelistElement.addEventListener("iteminvoked", itemInvoked);
            backbutton.addEventListener("click", backButtonClick);

            articlesList = new WinJS.Binding.List();
            var publicMembers = { ItemList: articlesList };
            WinJS.Namespace.define("C9Data", publicMembers);

            args.setPromise(WinJS.UI.processAll().then(downloadBlogFeed));
    };

    function backButtonClick(e) {
        articlecontent.style.display = "none";
        articlelist.style.display = "";
        WinJS.UI.Animation.enterPage(articlelist);
    }

    function itemInvoked(e) {
        var currentArticle = articlesList.getAt(e.detail.itemIndex);
        WinJS.Utilities.setInnerHTMLUnsafe(articlecontent, currentArticle.content);
        articlelist.style.display = "none";
        articlecontent.style.display = "";
        WinJS.UI.Animation.enterPage(articlecontent);
    }

    function downloadBlogFeed() {
        WinJS.xhr({ url: "http://css-tricks.com/?feed=rss" }).then(function (rss) {
            var items = rss.responseXML.querySelectorAll("item");

            for (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(article);
                }
        ...