appcelerator-titaniumcommonjsappcelerator-alloy

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


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);
    }
}

Solution

  • 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.