Dynamic style change in Titanium Alloy

Question

I am new to the Titanium-Alloy. I am creating a 9X9 matrix using xml mark up. I want to change the background color of all the cells if I clicked on a single cell. My questions are

1) Can I use class property like in jquery

$(".col").click(function() {
    $(".col").css("background-color","red");
});

2) Should I change the background color using id property of each and every cell

3) Is it possible to assign a common click listner to all the cells.

Following is my xml markup

<View id="rowContainer" class="rowContainer">

<View id="rowHolder" class="rowHolder">

<View id="row1" class="row">

<View id="row1col1" class="col"></View>

<View id="row1col2" class="col"></View>

<View id="row1col3" class="col"></View>

<View id="row1col4" class="col"></View>

<View id="row1col5" class="col"></View>

<View id="row1col6" class="col"></View>

<View id="row1col7" class="col"></View>

<View id="row1col8" class="col"></View>

<View id="row1col9" class="col"></View>

</View>

:

:

:

<View id="row9" class="row">

<View id="row9col1" class="col"></View>

<View id="row9col2" class="col"></View>

<View id="row9col3" class="col"></View>

<View id="row9col4" class="col"></View>

<View id="row9col5" class="col"></View>

<View id="row9col6" class="col"></View>

<View id="row9col7" class="col"></View>

<View id="row9col8" class="col"></View>

<View id="row9col9" class="col"></View>

</View>


</View> // end rowHolder

</View> // end rowContainer

WeMakeSoftware WeMakeSoftware · Accepted Answer · 2014-10-24T10:22:13

For the first and third parts:

No, you cannot use that technique. You have to manually assign the classes to the proxy objects. Something similar to this:

Define a function inside your controller

function cellClickHandler(event) {
   $.addClass(event.source, 'backgroundRedColorClass');
}

In view.xml add:

<View id="row9col4" class="col" onClick='cellClickHandler'></View>

For the second part:

Yes, this is also an option. Assuming you have all references to cells in an array:

_.each(referencesToCells, function(cell){
     $.addClass(cell, 'backgroundRedColorClass');
});

Dynamic style change in Titanium Alloy

1 Answers