ready Handler Windows Store App with Javascript

Question

I have a Navigation App and I want to cause the second page which is going to be loaded to the default.html to execute a function in ready section.

I have written in the home.js the following code:

(function () {
    "use strict";

    WinJS.UI.Pages.define("/pages/home/home.html", {
        // This function is called whenever a user navigates to this page. It
        // populates the page elements with the app's data.
        ready: function (element, options) {
            // TODO: Initialize the page here.

            var articlesList;

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



        },

        RSSFeedHandler: function getRssFeed() {
            WinJS.xhr({ url: "http://feeds.feedburner.com/dotnetzone?format=xml" }).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;
                    article.link = items[n].querySelector("link").textContent;
                    article.description = items[n].querySelector("description").textContent;
                    article.pubDate = items[n].querySelector("pubDate").textContent;
                    articlesList.push(article);
                }
            });
        }

    });
})();

But this causes a problem when running it to the debugger; and the it stops.

My home.html page contains the following tags:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>homePage</title>

    <!-- WinJS references -->
    <link href="//Microsoft.WinJS.1.0/css/ui-dark.css" rel="stylesheet" />
    <script src="//Microsoft.WinJS.1.0/js/base.js"></script>
    <script src="//Microsoft.WinJS.1.0/js/ui.js"></script>

    <link href="/css/default.css" rel="stylesheet" />
    <link href="/pages/home/home.css" rel="stylesheet" />
    <script src="/pages/home/home.js"></script>
</head>
<body>
    <!-- The content that will be loaded and displayed. -->
    <div class="fragment homepage">
        <div id="main">
            <div id="DNZItemTemplate" data-win-control="WinJS.Binding.Template" style="display: none;">
                <div class="listItemTemplate" style="width: 173px; height: 100px;">
                    <div class="listItemTitle" data-win-bind="innerText: title" style="width: 173px; height: 100px;"></div>
                    <div class="listItemImage" data-win-bind="innerText: pubDate" style="width: 173px; height: 100px;"></div>
                    <!--<div class="listItemTitle" data-win-bind="innerText: link">
                    </div>-->
                </div>
            </div>
            <header aria-label="Header content" role="banner">
                <button class="win-backbutton" aria-label="Back" disabled type="button"></button>
                <h1 class="titlearea win-type-ellipsis">
                    <span class="pagetitle">Καλως ήρθατε!</span>
                </h1>
            </header>
            <section aria-label="Main content" role="main">
                <section id="content">
                    <div id="articlelist" data-win-control="WinJS.UI.ListView" data-win-options="{ itemDataSource: DNZ.ItemList.dataSource, itemTemplate: DNZItemTemplate }"></div> 
                </section>
            </section>
            </div>
    </div>
</body>
</html>

and I think the problem is when I try to put the item to the list view! Do you have any ideas for the way I have to write it to run the getRSSFeed function when the home.html is being loaded?

ipplos · Accepted Answer · 2013-04-01 08:44:36Z

In order for the articlesList to be visible in the RSSFeedHndler method you need to make it a property of the page object as follows:

(function () {
"use strict";

WinJS.UI.Pages.define("/pages/home/home.html", {
    articlesList:null,
    // This function is called whenever a user navigates to this page. It
    // populates the page elements with the app's data.
    ready: function (element, options) {
        // TODO: Initialize the page here.

        // var articlesList;
        this.articlesList = new WinJS.Binding.List();

        var publicMembers = { ItemList: articlesList };
        WinJS.Namespace.define("DNZ", publicMembers);
    },

    RSSFeedHandler: function getRssFeed() {
        var _this=this;
        WinJS.xhr({ url: "http://feeds.feedburner.com/dotnetzone?format=xml" }).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;
                article.link = items[n].querySelector("link").textContent;
                article.description = items[n].querySelector("description").textContent;
                article.pubDate = items[n].querySelector("pubDate").textContent;
                _this.articlesList.push(article);
            }
        });
    }

});

})();

Collectives™ on Stack Overflow

ready Handler Windows Store App with Javascript

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related