locked
Problem using XHR to get data and then show in listview control RRS feed

  • Question

  • In the BUILD bits, I could pass a function to the processAll method and access elements from inside that and then set my datasource with the results.  With the win8 consumer, this does not work.  How can I load a listview from an external data source (url).  I can't find any examples of this.

    app.onactivated = function (eventObject) {
            if (eventObject.detail.kind === Windows.ApplicationModel.Activation.ActivationKind.launch) {
                if (eventObject.detail.previousExecutionState !== Windows.ApplicationModel.Activation.ApplicationExecutionState.terminated) {
                    // TODO: This application has been newly launched. Initialize 
                    // your application here.
                } else {
                    // TODO: This application has been reactivated from suspension. 
                    // Restore application state here.
                }
                WinJS.UI.processAll(elements).then(function() {
    
                    var llv = elements.all.legislaturelistview;
    
                    var dataArray = [
                        { summary1: "itemsummary1a", summary2: "itemsummary2a", summary3: "itemsummary3a", picture: "images/p1.jpg" },
                        { summary1: "itemsummary1x", summary2: "itemsummary2x", summary3: "itemsummary3x", picture: "images/p2.jpg" }
                    ];
    


                    ];


    Peter Kellner http://peterkellner.net Microsoft MVP • ASPInsider

    Monday, March 5, 2012 9:09 PM

Answers

  • Here, I wrote a sample that uses an XHR to get the front page of Reddit in JSON format and then display the results with super simple ListView binding. Here's the HTML:

    <body>
        <div id="redditPostTemplate" data-win-control="WinJS.Binding.Template">
            <div class="redditPost">
                <span class="title" data-win-bind="innerText: data.title WinJS.Binding.oneTime"></span>: 
                <span class="author" data-win-bind="innerText: data.author WinJS.Binding.oneTime"></span>
            </div>
        </div>
        <div id="myListView" data-win-control="WinJS.UI.ListView" data-win-options="{itemTemplate: redditPostTemplate, layout : {type: WinJS.UI.ListLayout} }"></div>
    </body>

    And then the JS:

    (function () {
        "use strict";
    
        var app = WinJS.Application;
    
        // This function responds to all application activations.
        app.onactivated = function (eventObject) {
            if (eventObject.detail.kind === Windows.ApplicationModel.Activation.ActivationKind.launch) {
                WinJS.UI.processAll().then(function onComplete(processedElements) {
    
                    var lv = document.getElementById("myListView").winControl;
                    var xhrOptions = { url: "http://reddit.com/.json" };
    
                    WinJS.xhr(xhrOptions).done(function onXhrDone(myXhr) {
                        var response = JSON.parse(myXhr.response);
                        var postList = new WinJS.Binding.List(response.data.children);
                        lv.itemDataSource = postList.dataSource;
                    });
                });
            }
        };
    
        app.start();
    })();
    

    Let me know if you have questions.


    Senior Dev for Windows Phone Services

    Monday, March 5, 2012 10:34 PM

All replies