locked
Update specific listview item

    Question

  • I have a listview im using as navigation which has 5 items.

    One of the items is login. I want to be able to change the text to logout once the user has logged in without re loading the whole listview.

    How would i do this?

    Monday, November 19, 2012 11:41 AM

Answers

  • ListView doesn't rebind when notifyMutated is called unfortunately...u need to explicitly update the binding. In the code snippet below i've created a button test and when a user clicks on it, the listview item at position 0 is updated.

    document.getElementById("test").addEventListener("click", function ()
    {
        // get win control
        var control = document.getElementById("listview-control").winControl;
    
        // get item from data source
        var item = pageList.dataSource.itemFromIndex(0).done(function (e)
        {
            // update stuff
            e.data.title = "test"
            e.data.subtitle = "sub test";
                        
            // re-do binding for that specific element
            WinJS.Binding.processAll(control.elementFromIndex(0), e.data);
        });
    }, false);

    U can find alot of info about data binding here: Data Binding in a Windows Store App with JavaScript


                        
    • Edited by M. Dirksma Monday, November 19, 2012 4:06 PM
    • Marked as answer by Song Tian Friday, November 23, 2012 10:50 AM
    Monday, November 19, 2012 3:49 PM
  • Hi Ashley,

    From your description, I understand that you want to make change to some certain items in a WinJS.binding.List datasource and make the change automatically reflected on the ListView control (bound to the datasource list), correct?

    If so, you need to make sure the item objects contained in the WinJS.Binding.List datasource is observable objects. Normal javascript object is not observable. But the WinJS.Binding.as function can help you convert a normal js object into an observable object (do it before you add it into the WinJS.Binding.List):


    #Quickstart: binding data and styles (Windows Store apps using JavaScript and HTML)
    http://msdn.microsoft.com/en-us/library/windows/apps/hh700358.aspx

    #WinJS.Binding.as function (Windows)
    http://msdn.microsoft.com/en-us/library/windows/apps/br229801.aspx

    Here is a former thread I've posted some code demostrating the databinding through observable object:


    http://social.msdn.microsoft.com/Forums/en-US/winappswithhtml5/thread/bb1bd41b-84ba-47ad-91b4-21bff1499d9b


    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 Friday, November 23, 2012 10:50 AM
    Wednesday, November 21, 2012 2:58 AM
    Moderator

All replies

  • ListView doesn't rebind when notifyMutated is called unfortunately...u need to explicitly update the binding. In the code snippet below i've created a button test and when a user clicks on it, the listview item at position 0 is updated.

    document.getElementById("test").addEventListener("click", function ()
    {
        // get win control
        var control = document.getElementById("listview-control").winControl;
    
        // get item from data source
        var item = pageList.dataSource.itemFromIndex(0).done(function (e)
        {
            // update stuff
            e.data.title = "test"
            e.data.subtitle = "sub test";
                        
            // re-do binding for that specific element
            WinJS.Binding.processAll(control.elementFromIndex(0), e.data);
        });
    }, false);

    U can find alot of info about data binding here: Data Binding in a Windows Store App with JavaScript


                        
    • Edited by M. Dirksma Monday, November 19, 2012 4:06 PM
    • Marked as answer by Song Tian Friday, November 23, 2012 10:50 AM
    Monday, November 19, 2012 3:49 PM
  • Hi Ashley,

    From your description, I understand that you want to make change to some certain items in a WinJS.binding.List datasource and make the change automatically reflected on the ListView control (bound to the datasource list), correct?

    If so, you need to make sure the item objects contained in the WinJS.Binding.List datasource is observable objects. Normal javascript object is not observable. But the WinJS.Binding.as function can help you convert a normal js object into an observable object (do it before you add it into the WinJS.Binding.List):


    #Quickstart: binding data and styles (Windows Store apps using JavaScript and HTML)
    http://msdn.microsoft.com/en-us/library/windows/apps/hh700358.aspx

    #WinJS.Binding.as function (Windows)
    http://msdn.microsoft.com/en-us/library/windows/apps/br229801.aspx

    Here is a former thread I've posted some code demostrating the databinding through observable object:


    http://social.msdn.microsoft.com/Forums/en-US/winappswithhtml5/thread/bb1bd41b-84ba-47ad-91b4-21bff1499d9b


    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 Friday, November 23, 2012 10:50 AM
    Wednesday, November 21, 2012 2:58 AM
    Moderator