locked
Updating WinJS listview

    Question

  • I have a hybrid web app, I would like to use WinJS but I have a problem I have not been able to solve and I am running out of time.

    On this jsfiddle http://jsfiddle.net/cd46z7eu/2/ you will see a search box, if you enter the postcode 6073 and then select “Mundaring”, it will return a remote json result with 2 items, or alternatively if you entered 6061 and selected “Nollamara” you will get 1 result. Either of these selections will work when refreshing the page

    The problem I have is that this works only once, after making the first selection and binding the result to the listview, making a second selection dose not update the list view.

    Try making the queries above one after another and you will see my problem.
    How do I update the listview after its initial population?

    Thanks


    Alan Mosley - ThatsIT Solutions


    Friday, April 10, 2015 3:55 PM

Answers

  • Hi Alan,

    In short, I think this should help you: http://skimedic.com/blog/post/2012/12/20/MVVM-in-WinJS-Part-2-e28093-Observable-Collections.aspx

    Maybe my previous post is not that correct, here I edit some:

        WinJS.Namespace.define("ListViewData.listView", { 
            data: null,
            update: function (list) { 
                var k = this.data.length;
                for (var i = 0; i < k; i++) {
                    this.data.pop();
                }
                //push data here into the list...
            },
        });

    And in the postData().done() function, should be something like:

            var itemList = new WinJS.Binding.List(obj);
    
           // var publicMembers =
           //     {
           //         itemList: itemList
           //     };
            var currentdate = new Date(); 
           //test is a div in the html page
           document.getElementById("test").innerHTML = "Update at "
                    + currentdate.getDate() + "/"
                    + (currentdate.getMonth()+1)  + "/" 
                    + currentdate.getFullYear() + " @ "  
                    + currentdate.getHours() + ":"  
                    + currentdate.getMinutes() + ":" 
                    + currentdate.getSeconds();
            if(ListViewData.listView.data == null)
            {
                ListViewData.listView.data = itemList;
            }
            else
            {
                ListViewData.listView.update(itemList);
            }

    Hope this helps.

    --James


    We are trying to better understand customer views on social support experience, so your participation in this interview project would be greatly appreciated if you have time. Thanks for helping make community forums a great place.
    Click HERE to participate the survey.


    Monday, April 13, 2015 8:45 AM
    Moderator

All replies

  • Hi Alan,

    I tested with your code and looks like the UI is not refreshed as expected even the getJobs() method executed.

    Since your code is not directly binding List to the ListView, you are using Namespace package the List as ListViewData.listView.data, it could be more complicate to implement the refresh feature.

    Try to make things easier, binding list directly to the ListView without namespace defined, see a good sample: https://code.msdn.microsoft.com/windowsapps/ListView-custom-data-4dcfb128, in scenario two we can directly shuffle the tiles by a button click, here you should be able to refresh the list by RemoteData().postData() succeed.

    The main issue might be the UI don't know the date source has been changed, may be this method will help you: notifyReload method. The method will tell the listener that the list has been modified and should update the layout. Not quite sure, but still working on it.

    I will reply here when I have any updates.

    --James


    We are trying to better understand customer views on social support experience, so your participation in this interview project would be greatly appreciated if you have time. Thanks for helping make community forums a great place.
    Click HERE to participate the survey.



    Monday, April 13, 2015 7:44 AM
    Moderator
  • Hi Alan,

    In short, I think this should help you: http://skimedic.com/blog/post/2012/12/20/MVVM-in-WinJS-Part-2-e28093-Observable-Collections.aspx

    Maybe my previous post is not that correct, here I edit some:

        WinJS.Namespace.define("ListViewData.listView", { 
            data: null,
            update: function (list) { 
                var k = this.data.length;
                for (var i = 0; i < k; i++) {
                    this.data.pop();
                }
                //push data here into the list...
            },
        });

    And in the postData().done() function, should be something like:

            var itemList = new WinJS.Binding.List(obj);
    
           // var publicMembers =
           //     {
           //         itemList: itemList
           //     };
            var currentdate = new Date(); 
           //test is a div in the html page
           document.getElementById("test").innerHTML = "Update at "
                    + currentdate.getDate() + "/"
                    + (currentdate.getMonth()+1)  + "/" 
                    + currentdate.getFullYear() + " @ "  
                    + currentdate.getHours() + ":"  
                    + currentdate.getMinutes() + ":" 
                    + currentdate.getSeconds();
            if(ListViewData.listView.data == null)
            {
                ListViewData.listView.data = itemList;
            }
            else
            {
                ListViewData.listView.update(itemList);
            }

    Hope this helps.

    --James


    We are trying to better understand customer views on social support experience, so your participation in this interview project would be greatly appreciated if you have time. Thanks for helping make community forums a great place.
    Click HERE to participate the survey.


    Monday, April 13, 2015 8:45 AM
    Moderator
  • Thanks for your help.
    I was eager to try your example, but I have run into a problem. OI am using TypeScript and in typescript the namespace is not recognized. this line errors ListViewData.listView.data "cannot find name ListViewData" I have WinJS.d.ts definitions so not sure how to access namespace.
    I thought WinJS and Typescript went together.
    Thanks


    Alan Mosley - ThatsIT Solutions

    Monday, April 13, 2015 11:14 AM
  • OK done it, it worked
    Thanks very much


    Alan Mosley - ThatsIT Solutions

    Monday, April 13, 2015 3:31 PM