locked
listview UI not getting updated when list items are added

    Question

  • hi

    Here are the bunch of things I tried on this data.

    var dataarray = [{id :"one"},{id :"two"}];

    var datalist = new WinJS.Binding.List(dataarray);

    var p= {itemList :dataList};

    WinJS.Namespace.define("Dataex",p);

    .....

    dataList.push({id : "three"});

    //this one pushes the object into the datalist but UI did not get updated

    dataArray.push(...

    //after loading the datalist with this new array again, last element got added but ui did not show up.

    begin batch edit to insertAtEnd and inserted an obj through itemdatasource

    //am I missing something?

    I also got the listview element by id and did forceLayout() on that.

    itemDataSource and itemtemplate are pointed right.

    Listview sample does only that.But mine doesn't show the new item in the list.

    PLS help.

    Wednesday, May 9, 2012 7:42 AM

Answers

  • Without seeing all of your code, it is difficult to debug your problem.  I do notice that there are some incorrect variable name issues: datalist != dataList

    But here is a very simple example that works.

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <title>MinListView</title>
        <!-- WinJS references -->
        <link href="//Microsoft.WinJS.0.6/css/ui-dark.css" rel="stylesheet">
        <script src="//Microsoft.WinJS.0.6/js/base.js"></script>
        <script src="//Microsoft.WinJS.0.6/js/ui.js"></script>
        <!-- MinListView references -->
        <link href="/css/default.css" rel="stylesheet">
        <script src="/js/default.js"></script>
        <script type="text/javascript">WinJS.UI.processAll();</script>
    </head>
    <body>
        <div id="myTemplate" data-win-control="WinJS.Binding.Template">
            <div data-win-bind="innerText: id"></div>
        </div>
        <button id="add">Add</button>
        <div id="myListView" data-win-control="WinJS.UI.ListView" data-win-options="{itemDataSource: Dataex.itemList.dataSource, itemTemplate:select('#myTemplate')}">
        </div>
    </body>
    </html>
    (function () {
        "use strict";
    
        var dataArray = [{ id: "one" }, { id: "two" }]
        var dataList = new WinJS.Binding.List(dataArray);
    
        var p ={itemList: dataList};
        WinJS.Namespace.define("Dataex", p);
    
        function addItem() {
            dataList.push({ id: "three" });
        }
    
        WinJS.Utilities.ready(function () {
            document.getElementById("add").addEventListener("click", addItem, false);
        });
    
    })();



    Wednesday, May 9, 2012 10:42 AM

All replies

  • Without seeing all of your code, it is difficult to debug your problem.  I do notice that there are some incorrect variable name issues: datalist != dataList

    But here is a very simple example that works.

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <title>MinListView</title>
        <!-- WinJS references -->
        <link href="//Microsoft.WinJS.0.6/css/ui-dark.css" rel="stylesheet">
        <script src="//Microsoft.WinJS.0.6/js/base.js"></script>
        <script src="//Microsoft.WinJS.0.6/js/ui.js"></script>
        <!-- MinListView references -->
        <link href="/css/default.css" rel="stylesheet">
        <script src="/js/default.js"></script>
        <script type="text/javascript">WinJS.UI.processAll();</script>
    </head>
    <body>
        <div id="myTemplate" data-win-control="WinJS.Binding.Template">
            <div data-win-bind="innerText: id"></div>
        </div>
        <button id="add">Add</button>
        <div id="myListView" data-win-control="WinJS.UI.ListView" data-win-options="{itemDataSource: Dataex.itemList.dataSource, itemTemplate:select('#myTemplate')}">
        </div>
    </body>
    </html>
    (function () {
        "use strict";
    
        var dataArray = [{ id: "one" }, { id: "two" }]
        var dataList = new WinJS.Binding.List(dataArray);
    
        var p ={itemList: dataList};
        WinJS.Namespace.define("Dataex", p);
    
        function addItem() {
            dataList.push({ id: "three" });
        }
    
        WinJS.Utilities.ready(function () {
            document.getElementById("add").addEventListener("click", addItem, false);
        });
    
    })();



    Wednesday, May 9, 2012 10:42 AM
  • great. checked with your code and found I had left the button inside a form element. thanks a lot.

    one more thing. now I need to push the data into dataList and dataArray. is it okay to take the same data twice and save it or is there a right way to save the item in dataList to the array.

    thankyou jr.

    Wednesday, May 9, 2012 8:30 PM
  • Arun,

    You could push your data into the dataArray at the same time you are adding to the dataList, but perhaps you could just operate on the data in the dataList directly?  Maintaining two copies of your data may be problematic.

    Your dataList is a Binding.List object and in addition to push() and pop(), you can access individual items using the getAt(index) and setAt(index) methods as well as a forEach() method for iteration.  In some cases, that is all the functionality you need.

    Wednesday, May 9, 2012 10:15 PM
  • Thanks. Am doing contiguously.

    dataList.push({itemname : mytext});

    dataArray.push({itemname : mytext)};

    -karthika arun

    Thursday, May 10, 2012 11:57 PM