Problem Description
If you change an item, the change will be reflected on other items as well by error.
Steps to reproduce
1. Create a new mobile app (classic titanium)
2. Paste the testcode into the app.js
var win = Ti.UI.createWindow();
var myTemplate = {
properties: {
height: 50,
accessoryType: Ti.UI.LIST_ACCESSORY_TYPE_NONE,
selectionStyle: Ti.UI.iPhone.ListViewCellSelectionStyle.NONE,
},
childTemplates: [
{
type:'Ti.UI.View',
bindId:'bindField',
properties: {
width:Ti.UI.FILL,
backgroundColor: 'green',
},
},
],
events: {
'click': function(e){
// Ti.API.log(e);
e.source.backgroundColor = e.source.backgroundColor=='green'?'red':'green';
},
},
};
var itemCount = 100;// Change this to 10 and the bug won't happen
var section = Ti.UI.createListSection();
var data = [], views;
for (var i=0;i<itemCount;++i){
data.push({
template: 'myCell',
properties: {
itemId: 'id'+i,
},
bindField:{
},
});
}
section.setItems(data);
var listView = Ti.UI.createListView({
top: 20,
templates:{'myCell':myTemplate},
sections:[section],
// separatorStyle: Ti.UI.iPhone.ListViewSeparatorStyle.NONE,
separatorInsets: {left:0, right:0},
});
win.add(listView);
win.open();
3. Run the app and click on the second item.
4. Scroll down and you will see that the second row of the next "page/screen" changed as well (like if they were clones)
Extra info:
If I set down itemCount = 10; then this behavior will not happen.
- Other examples here:
http://developer.appcelerator.com/question/176217/did-someone-have-seen-this
Thanks for your report! Your testcase helped a lot to reproduce the issue! The Platform team will set the priority on this bug.
Issue reproduces Titanium Command-Line Interface, CLI version 3.3.0, Titanium SDK version 3.3.0.GA iOS SDK: 7.1 iOS iPhone Simulator: 7.1
This line is the problem
ListView is a data based API system, not a View based API system. So when you modify a view directly and not the data, we have no way to know. So when a cell gets reused we do not reset the property. You should be modifying the item instead.Thanks [~vduggal]. Sounds logical. For all who came over the same issue, this code is the way to go:
events: { 'click': function(e){ var item = e.section.getItemAt(e.itemIndex); item.bindField.backgroundColor = item.bindField.backgroundColor == 'green'?'red':'green'; e.section.updateItemAt(e.itemIndex, item), item = null; }, },Closing ticket as invalid with reference to the above comments.