Problem description
Creating a large Table View (around 300 TableViewRows) is taking a long time, eventually failing to load.
Alloy version:
index.xml
<Alloy>
<Window class="container">
<TableView id='table'></TableView>
</Window>
</Alloy>
index.js
var data = [];
for (var i=0;i<300;i++){
var tvr = Ti.UI.createTableViewRow({
title:'test' + i,
});
data.push(tvr);
$.table.setData(data);
};
$.index.open();
non-alloy version:
var win = Ti.UI.createWindow({
backgroundColor:'white'
});
var data = [];
for (var i =0; i<300;i++){
var tvr = Ti.UI.createTableViewRow({
title: 'test' + i
});
data.push(tvr);
};
var tv = Ti.UI.createTableView({
data:data
});
win.add(tv);
win.open();
The code for the Alloy example is structured improperly. You have the setData() call inside the loop, which would essentially force it to update 300 times before rendering, accounting for the massive delay. I moved the setData() outside the loop and the performance becomes equal between the Alloy and traditional version.