Template ListView Properties/Events Alloy

Hi, I've a ListView but, as you can see, I have repeated the separatorColor property on several elements, and still does not change the color of the separator.

The other issue, is that I cat get the click event to work, it seems like, it can't find the element id when I'm trying to add an event listener.

window.xml

<Alloy>
    <View class="vertical_layout" id="page_alias"/>
</Alloy>

var pageAlias = $.page_alias;
 
var clientsList = [
    {id:1,name:"Automoveis"},
    {id:2,name:"Compal"},
    {id:3,name:"Comercio"},
    {id:4,name:"Carros Usados Lda."},
    {id:5,name:"Televisores"}
];
 
var listNormalStatus = {
    childTemplates: [{
        type: 'Ti.UI.View',
        bindId: 'container',
        properties: {
            height:"50dp",
            width:Ti.UI.FILL,
            backgroundColor:"#ffffff",
            backgroundSelectedColor:Alloy.CFG.hover_color,
            zIndex:1,
            separatorColor:"#f2f2f6"
        }
    },{
        type: 'Ti.UI.Label',
        bindId: 'title',
        properties: {
            left:"10dp",
            height:"50dp",
            right:"0dp",
            color:"#585858",
            font:{
                fontSize:"18dp"
            },
            selectedColor:"#ffffff",
            zIndex:2,
            separatorColor:"#f2f2f6"
        },
    }],
    events: {
        click: toggleactiveStatus
    }
};
 
var listActiveStatus = JSON.parse(JSON.stringify(listNormalStatus));
 
listActiveStatus.childTemplates[0].properties.backgroundColor = Alloy.CFG.hover_color;
listActiveStatus.childTemplates[1].properties.color = "#ffffff";
 
listActiveStatus.events.click = toggleactiveStatus;
 
var listHeaderStyle = JSON.parse(JSON.stringify(listNormalStatus));
 
listHeaderStyle.childTemplates[0].properties.backgroundColor = "#f2f2f6",
listHeaderStyle.childTemplates[0].properties.height = "35dp",
listHeaderStyle.childTemplates[1].properties.height = "35dp",
listHeaderStyle.childTemplates[1].properties.font = {
    fontSize:"18dp",
    fontWeight:"bold"
};
 
var listView = Ti.UI.createListView({
    templates: { 
        'normalStatus':listNormalStatus,
        'activeStatus':listActiveStatus,
        'headerStyle':listHeaderStyle
    },
    defaultItemTemplate:'normalStatus',
    separatorColor:"#f2f2f6"
});
 
var data = [];
var category = [];
 
for (var i = 0; i < clientsList.length; i++) {
 
    var categoryTitle = clientsList[i].name;
    categoryTitle = categoryTitle.charAt(0);
 
    if(!contains(category,categoryTitle)) {
 
        category.push(categoryTitle);
 
        data.push({
            template:'headerStyle',
            title: {
                text:categoryTitle.toUpperCase()
            },
            properties: {
                itemId:clientsList[i].id,
                accessoryType:Ti.UI.LIST_ACCESSORY_TYPE_NONE,
                separatorColor:"#f2f2f6"
            }
        });
    }
    data.push({
        title: { 
            text:clientsList[i].name
        },
        properties: {
            itemId:clientsList[i].id,
            accessoryType:Ti.UI.LIST_ACCESSORY_TYPE_NONE,
            separatorColor:"#f2f2f6"
        }
    });
}
 
var section = Ti.UI.createListSection();
 
section.setItems(data);
listView.sections = [section];
 
function toggleactiveStatus(e) {
    var item = section.getItemAt(e.itemIndex);
    if(item.template != 'headerStyle') {
        if(item.properties.accessoryType == Ti.UI.LIST_ACCESSORY_TYPE_NONE) {
            item.properties.accessoryType = Ti.UI.LIST_ACCESSORY_TYPE_activeStatusMARK;
            item.template = 'activeStatus';
        }
        else {
            item.properties.accessoryType = Ti.UI.LIST_ACCESSORY_TYPE_NONE;
            item.template = 'normalStatus';
        }
    }
    section.updateItemAt(e.itemIndex, item);
}
 
pageAlias.add(listView);

<Alloy>
    <Templates>
        <ItemTemplate name="template" class="clients_list_template">
            <Label class="clients_list_item_title" bindId="clients_list_item_title" id="clients_list_click"/>
        </ItemTemplate>
    </Templates>
    <ListItem class="clients_list_item" clients_list_item_title:separatorColor="#f2f2f6"/>
</Alloy>

var args = arguments[0] || {};
 
$.clients_list_item_title.text = args.name;
 
// doesn't fire event
$.clients_list_click.addEventListener("click", function(e) {
    alert("open: "+args.name); 
    //Ti.App.fireEvent('loadScreen',{name:"clients_view"});
});

"ListView": {
    separatorColor:"#f2f2f6"
},
 
"ListSection": {
    separatorColor:"#f2f2f6"
},
 
"ListItem": {
    separatorColor:"#f2f2f6"
},
 
".clients_list": {
    separatorColor:"#f2f2f6"
},
 
".clients_list_template": {
    separatorColor:"#f2f2f6"
},
 
"clients_list_item_title": {
    separatorColor:"#f2f2f6"
},
 
".clients_list_section": {
    height:"35dp",
    width:Ti.UI.FILL,
    backgroundColor:"#f2f2f6",
    separatorColor:"#f2f2f6"
},
 
".clients_list_section_header": {
    height:"35dp",
    width:Ti.UI.FILL,
    backgroundColor:"#f2f2f6",
    separatorColor:"#f2f2f6"
},
 
".clients_list_section_title": {
    left:"10dp",
    height:"35dp",
    color:"#585858",
    font:{
        fontSize:"18dp",
        fontWeight:"bold"
    }
},
 
".clients_list_item": {
    height:"50dp",
    width:Ti.UI.FILL
},
 
".clients_list_item_title": {
    left:"10dp",
    height:"50dp",
    color:"#585858",
    font:{
        fontSize:"18dp"
    },
    selectedColor:"#ffffff",
    backgroundColor:"#ffffff",
    backgroundSelectedColor:Alloy.CFG.hover_color,
    separatorColor:"#f2f2f6"
},