locked
ListView databinding behaving strangely RRS feed

  • Question

  • Hi,

    I am using ListView and binding tasks array to it. I am using WinJS.Binding.as  syntax so that I will get two way binding.  On itemInvoked event handler I am trying to change selected item with some random values. I have 3 items in the list.  When I select 1st or 2nd  item then only visit time is changed but when  I change 3d item it changes all the information which I have changed.   The handler code is below.

     listHandler: function (e) {
    
                var aryNames = ["George", "Sean", "Lorry", "Rita"];
                var visitTimes = ["11:30 AM","12:15 PM","2:30 PM","1:30 PM"];
    
                if (index > 2)
                    index = 0;
                else
                    index++;
    
                var taskIndex = e.detail.itemIndex;
                var t = TaskTracker.tasks[taskIndex];
                t.name = "It is Test";
                t.customer.firstName = aryNames[index];
                t.customer.init();
                t.visitTime = visitTimes[index];
                t.description = "New Description";
    
                     }
    HTML Markup is given below

     

    <divid="taskTemplate"data-win-control="WinJS.Binding.Template">

    <divclass="taskItemStyle">

    <divid="rightDiv">

    <divid="itemTaskName"data-win-bind="innerText: name"></div>

    <pid="itemTaskDescription"data-win-bind="innerText :  description"></p>

     <pid="itemCustomer"data-win-bind="innerText : customer.fullName"></p>

    </div>

    <divid="leftDiv">

    <h2data-win-bind="innerText : visitTime"></h2>

    </div>

    </div>

    </div>

    <divid="taskListView"data-win-control="WinJS.UI.ListView"

    data-win-options="{itemTemplate : select('#taskTemplate'),SelectionMode : 'Single' }"    

    ></div>

    Please advise why this is happening!

    Thanks in advance

    Gokul

     

     


    • Edited by Gokuldas Thursday, April 25, 2013 2:38 PM
    Thursday, April 25, 2013 2:33 PM

All replies

  • What is index here ?

     if (index > 2)
                    index = 0;
                else
                    index++;
    

    Can you paste some of your code and explain what is happening exactly?

    - Girija

    Thursday, April 25, 2013 7:42 PM
  • Hi Girija,

    the index is used to change the values from arrays defined. This variable defined outside of the function. I am just modifying the item (Task) on selection and want to verify the changes reflect in the listview. Strangely when I select last item ( in this case 3d item) it  reflects all the changes but for other items it only reflects visit time.  

    Regards,

    Gokul

    Saturday, April 27, 2013 9:14 AM
  • How is the data to list bound .. Are you using a binding object ?

    Can you provide some sample code that we can use to reproduce the issue ?

    - Girija

    Tuesday, April 30, 2013 8:10 PM
  • Hi Girija,

    Please let me know your email so that I can send you the full source code so you can see the issue.

    Regards,

    Gokul

    Monday, May 6, 2013 10:31 AM
  • Please upload the solution at skydrive and share me the location at : girija45701 at gmail dot com

    - Girija


    Monday, May 6, 2013 8:13 PM
  •  

    Two way binding is not supported in WinJS. There are workarounds though on Stack Overflow and in Kraig Brockschmidt's free book (chapter 4)

    Programming Windows® 8 Apps with HTML, CSS, and JavaScript


    Wednesday, May 8, 2013 6:52 AM
  • Hi Girija,

    I have emailed you the source code. 

    Thanks 

    Gokul

    Thursday, May 9, 2013 8:23 AM
  • Thanks Adam,

    I know and taken care of two way binding using work around. The problem is with one way binding also.  I am displaying details of selected item in a form and when I do these changes they don't reflect in list view. Strangely it reflects changes when I do changes for last item.

    Regards,

    Gokul

    Thursday, May 9, 2013 8:25 AM