How to target dynamically UI elements created with common.js with Appcelerator?

Question

I am using Alloy and normally target an element in ui.xml with the contoller easily:

ui.xml

<Label id ="block1">

controller.js

$.block1.backgroundColor = "red";

But how can I target UI elements that are created within the controller filer (outside the function that creates the elements)? In particular, how can I later and dynamically set the background color of block2 to "green" when the elements are created by the for loop?

$.block2.backgroundColor = "green"; does not work as the element is not in the .xml file

function createBlocks(){
    for (i=0;i<=27;i++){
        var block = Ti.UI.createLabel({
            id: "block"+ i,
            backgroundColor: "red",
            text: i,
            width: 10,
            left: 2 + (10 * i),
        });
        $.hammerListStats.add(block);
    }
}

Answer 1

The block elements you are creating only life under that name inside the loop. You either need to store them in an array or use $.hammerListStats.children ot access them.

So either create an empty array before the loop var elements = [], use elements.push(block) inside the loop and use elements[0].text=... to change the text.

Or just use $.hammerListStats.children[0].text = ... to access them. This works fine as long as you don't have any other components inside $.hammerListStats or if you know their position you just add the value to it.

Answer 2

Elsewhere in your code you should be able to do something like this...

var i = 1;
var mytext = $["block"+ i].text;