Titanium SDK: 3.5.1.GA Platform & version: iOS 7.1 Device: iOS simulator Host Operating System: OSX Maverics Titanium Studio: no studio, I use CLI 3.4.2 Alloy: 1.5.1 My issue: I want to populate my TableViewRow from collection without "alloy data binding" (because I want more control in rendering), and start up for each row "setInterval's" wich will change my label in row every 500ms. I realized this is the case:
//index.xml <Alloy> <Window id="MainWin" platform="ios" class="container"> <View id="header"> <Label id="title">testCase</Label> <View id="addView"> <Button class="button" onClick="showTest">Show test</Button> </View> </View> <TableView id="tasksTable" onDelete="onDelete"> </TableView> </Window> </Alloy>
//index.js $.MainWin.open(); var tasks = Alloy.Collections.tasks; tasks.fetch(); $.tasksTable.moveable = true; $.tasksTable.editable = true; renderData(); function showTest(e) { Alloy.createController("test").getView().open(); } function fetchData() { var rows = []; var i = 0; tasks.map(function(task) { i = i + 1; var info = { rowId : i, name: task.get('title'), alloy_id: task.get('alloy_id') } var row = Alloy.createController('row', info).getView(); rows.push(row); }); return rows; } function renderData() { $.tasksTable.data = fetchData(); } function onDelete(e) { e.cancelBubble = true; tasks.models[e.index].destroy(); }
//row.xml <Alloy> <TableViewRow id="row" rowId="1" onClick="toogleTimer"> <Label id="name"></Label> <Label id="changingLabel"></Label> </TableViewRow> </Alloy>
//row.js var moment = require('alloy/moment'); var args = arguments[0] || {}; var tasks = Alloy.Collections.tasks; var timers = Alloy.Globals.timers; var id = args.alloy_id; tasks.fetch(); var task = tasks.get(id); $.row.className = 'taskRow'; $.row.rowId=args.rowId; $.name.text=args.name; if (task.get('active') == 1) { $.row.backgroundColor = '#eee'; } else { $.row.backgroundColor = '#fff'; } function toogleTimer (e) { if (task.get('active') == 0) { $.row.backgroundColor = '#eee'; task.set({ "active": true }).save(); if (typeof timers[id] == 'undefined') timers[id] = setInterval(function() { var someChangingValue = moment().unix(); if ($.timer.text != someChangingValue) $.timer.setText(someChangingValue); }, 500); } else { $.row.backgroundColor = '#fff'; task.set({ "active": false }).save(); if (typeof timers[id] != 'undefined') { clearInterval(timers[id]); delete timers[id]; } } }But rows and labes start flicking when I start >2-3 timers.. This is Alloy bug or code error?