Titanium Alloy - Change properties of dynamically generated ListView elements

Question

I am working with Appcelerator and am working on a messaging feature that I picked up from a previous employee on our company's mobile app. I was asked to integrate a message delete feature, and I took the route of adding a menu and allowing the user to toggle between message select mode and read mode. I put a checkbox style switch in each message template, and am trying to change the visibility of the switch element to true when the user clicks on "Select" from the menu. Because these elements are dynamically generated, I cannot access the elements directly by their id, because there are many with the same id. I have looked far and wide for a solution to this, especially since the community for Titanium is quite small. Does anyone know a possible solution?

Here is my XML:

<Alloy>
<Window id='window' >
<Menu id="menu" platform="android">
  <MenuItem id="menuItem1" title="Select" onClick="toggleSelect"/>
  <MenuItem id="menuItem2" title="Delete All" onClick="clearMessages"/>
</Menu>
<View id="ParentViewContainer">
  <ScrollView id="ParentScrollView" layout="vertical">
    <ListView backgroundColor="transparent" id="messageList">
      <Templates>
        <ItemTemplate name="sentTemplate" id="sentTemplate">
          <View class="containerView">
            <View id="sentTemplateView">
              <Switch id="sentSelectSwitch" class="selectSwitch" bindId="sentSelectSwitch" visible="false" value="false" onChange="toggleChecked"/>
              <Label bindId="message" id="message"/>
            </View>
          </View>
        </ItemTemplate>
        <ItemTemplate name="recievedTemplate" id="recievedTemplate">
          <View class="containerView">
            <View id="recievedTemplateView">
              <Switch id="recSelectSwitch" class="selectSwitch" bindId="recSelectSwitch" visible="false" value="false" onChange="toggleChecked"/>
              <Label bindId="message" id="message"/>
            </View>
          </View>
        </ItemTemplate>
      </Templates>
      <ListSection id="listSection">
      </ListSection>
    </ListView>
    <View id="sndView">
      <TextArea id="sndTxt"/>
        <Button id="sndBtn"/>
    </View>
  </ScrollView>
</View>

Answer 1

I would create separate templates for your list, one with the checkboxes visible and one without. When they "go into select mode" you'd assign the checkbox-visible template. I'd then use an itemclick event on the list and push the item's unique ID into an array or other structure that you would then walk later to actually delete once the user hits a Submit button.

Answer 2

The purpose of the ListView UI element is to reduce the usage of the Kroll Bridge between JS and the native code, therefore looping through all of the rows and calling updateItemAt seems like the wrong approach.

I'm not sure how many items are you drawing but based on the way the menu is implemented I would recommend recreating the list items with the correct UI (visible or not visible) could be a better solution.

As a side note, it will be pretty common that you get into those challenges of same ids while manipulating lists and scroll views, a solution to dynamic unique ids will be something like this:

var itemCount = 1;
_.each(dataModelObjects, function (_obj) {
    $['wrapper' + itemCount] = $.UI.create('View', { id: 'someIdInTSS'});
    itemCount++;
});