locked
calling winjs,xhr function to bind listview when using a seperate data.js RRS feed

  • Question

  • The  structure of my prjoect :

    default.html , default.js and i am adding a data.js to handle the data .

    I have added a basic list view in the html which will get the datasource from the below namespace binding exposed from data.js.

     var publicMembers =
            {
                itemList: dataList
            };
        WinJS.Namespace.define("DataExample", publicMembers);

    I have the below piece of winjs.xhr code in  :

            WinJS.xhr({ url: "http://search.twitter.com/search.json?q=%23windows8&rpp=100" }).then(
                    function (response) {
                        var json = JSON.parse(response.responseText);
                        var dataList = new WinJS.Binding.List(json.results);
               },
                    function (error) { console.log(error); },
                    function (progress) { }
    );

    Problem: I have to expose the datalist to namespace but i coudnt since it is written inside winjs.xhr() and it is not yet called .

    How to call this winjs.xhr() so tht i can get back an object which i can bind with data list & expose the same to namespace? or is there is something i doing terrible wrong here ?




    Tuesday, February 26, 2013 11:06 AM

Answers

  • Hi Ilakkiaselvan,

    It is ok and good practice to separate your data loading/network access code into a separate js file. For your case, you just need to take care of the global variable defining and properly assign and access them in your UI and data loading code.

    In Windows store javascript app, you can use WinJS.Namespace.define to declare some global accessible variables or functions. And such kind of variables can be accessed in all pages.


    #Organizing your code with WinJS.Namespace (Windows Store apps using JavaScript and HTML) (Windows)
    http://msdn.microsoft.com/en-us/library/windows/apps/Hh967793.aspx


    For example, We can define a global variable for storing data items like:


    WinJS.Namespace.define("AppData",
    {
     dataItems: null
    }
    );



    Then, in our WinJS.xhr code, we can directly store the data items we retrieved from network to the global variable:


     

    WinJS.xhr({ url: "http://search.twitter.com/search.json?q=%23windows8&rpp=100" }).then(
                    function (response) {
                        var json = JSON.parse(response.responseText);
          AppData.dataItems = json.results;
          // Here we can go ahead and call another function to populate the UI elements (such as Listview)
                        PopulateListView();
               },
                    function (error) { console.log(error); },
                    function (progress) { }
    );
    function PopulateListView(){
        var bindingList = new WinJS.Binding.List(AppData.dataItems);
        document.getElementById("listview1").winControl.itemDataSource = bindingList.dataSource;
        //.....
    }



    Please remember to mark the replies as answers if they help and unmark them if they provide no help.

    • Marked as answer by Song Tian Monday, March 4, 2013 10:28 AM
    Wednesday, February 27, 2013 5:29 AM
    Moderator