Quantcast
Channel: Appcelerator Developer Center Q&A Unanswered Questions 20
Viewing all articles
Browse latest Browse all 8068

Alloy TableViewRow flickering

$
0
0

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?

Viewing all articles
Browse latest Browse all 8068

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>