Creating dynamic listview and dataarray variable with eval

Question

 vararray[n] = 'dataArray' + n;
        varlist[n] ='dataList' + n;
       eval(" var dataArray" + n + " = [];");
       eval(" var dataList" + n + " = new  WinJS.Binding.List("+ vararray[n] +");");

I have to Create a new listview, each time when the user clicks a button to add a list. Later I need to access the items in all the lists.   I am trying to achieve it by creating strings in the arrays vararray and varlist.  Then making those string names as  array and listview variable names.  This code creates the following thru eval.

 

var dataArray0 = [];

var dataList0 = new WinJS.Binding.List(dataArray0);

 

But says an exception at this point, "dataArray0 is undefined"  (dataArray0 is defined though as new array)

 

Pls help .  Is this the way to go?  What is the proper method to achieve such a scenario of, creating new lists and assign a new datasource to it and access the new variables later. Any pointers are great too.

 

 

 

 

 

Answer 1

Hi ArunKarthika,

javascript itself is quite flexible for you to declare array and create array with arbitray number of items in code. For example, you can define an array first and then programmtically add new array objects into top level array:

var arrArrays = new Array();

for(var i=0;i<10;++i){
arrArrays.push(new Array());

}

// manipulate  arrArrays[0]

// manipulate arrArrays[n];

and you can also use the samme approach to declare an Array of WinJS.Binding.List objects and use them later.

#Array Object (JavaScript)
http://msdn.microsoft.com/en-us/library/windows/apps/k4h76zbx(v=vs.94).aspx

 

---

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

Answer 2

Thanks so much  Steven. I partially achieved success by having my list objects and the arrays they are binded to, inside another array. Now the latest listvew I am creating the latest is only getting displayed. The previous listviews and that previous itemadd buttons are not active once a new list is created.  I am trying to do addeventlisteners on each itemadd buttons as and when they are dynamically created.  I need to create a new textbox,addbutton and a listview, each time a newlist button is created.

 arrArrays[0][n] = new Array(); //data array eachtime.
          arrArrays[1][n] = new WinJS.Binding.List(arrArrays[0][n]);
 //list binded to that array

        var publmembnew = { itemList: arrArrays[1][n] };
        WinJS.Namespace.define("DataExamplenew", publmembnew);
 var string = "textspace"+n;
        var x = document.createElement("input");
        x.setAttribute("id", string);
        x.setAttribute("type", "text");

        var nextlistjs = document.getElementById("nextlist");
        var nexttextbtnjs = document.getElementById("nexttextbtn");
        var listtemplatejs = document.getElementById("listTemplate");

        var newDiv = document.createElement("div");
     var y  = new WinJS.UI.ListView(nextlistjs);
       y.itemDataSource = DataExamplenew.itemList.dataSource;
       y.itemTemplate = listtemplatejs;
       y.selectionMode = 'multi';
       y.tapBehavior = 'toggleSelect';
//Trying to do document.body.insertbefore, 

 var btnstring = "btnspace" + n;
       var z = document.createElement("input");
       z.setAttribute("type","button");
        z.setAttribute("id", btnstring);
        z.setAttribute("value", "add");  

        nexttextbtnjs.appendChild(x);
        nexttextbtnjs.appendChild(z);

                  var bstr = "btnspace" + n;
           document.getElementById(bstr).addEventListener("click", additemn, false);

but not sure how to add listview eachtime, since I get Hierarchyrequesterror and notFound error.

Any help on this would be really great, please.

Answer 3

 I got it to work by appending the newdiv that I created for listview.

One thing,  

var x = document.getElementById(listviewid).wincontrol;

doesnot return the value and so x is undefined. (The only new thing I have donw is I created this listview dynamically and added an id to it)(The id part is right because it works elsewhere)

Can anyone shed some light on how to retrieve the dynamically created listview's control.

Thanks

Answer 4

Hi ArunKarthika,

When you creating a ListView control programmtically in javascript code, you need to supply its container <div> element through the first parameter of its constructor ( see msdn reference below):

#WinJS.UI.ListView constructor (Windows)
http://msdn.microsoft.com/en-us/library/windows/apps/br211834.aspx

that parameter determines which <div> will be the control host of the ListView. And you do not need to manually append the ListView into the <div> after you have created the Listview object.

Hope this helps.

---

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

Answer 5

Hi Steven,

I got it to work now. I skipped using eval and achieved dynamic variables for my array and list by using arrays. Thanks so much for the help.

If only I append the elements(that hold my listview) each time, to an already existing html element,I am able to view my listview. 

Karthi.