List view itemclick event appcelerator

Question

I have a JSON defined in the code with and image, a title, a date and a url. This will be used to populate the list view. On the click event of any list item, I need to navigate to a different controller and render the view in it having the videoplayer that plays the video according to the clicked list item's url and i want to display the date and title too. I am not understanding how to code this in the itemClick event. Please help!

This is my .js file for DashboardController.

Alloy.createController('VideoPlayerController',videoInfo[i]).getView();
var sections = [];
//JSON to populate the listview
var videoInfo = [{
    pic : "/Images/playButton.png",
    info : "This in the the title for the first video.",
    date : "03/07/2017",
    url : "https://youtu.be/zkOSR0ZRb9khttps://youtu.be/zkOSR0ZRb9k"
}, {
    pic : "/Images/playButton.png",
    info : "This in the the title for the second video.",
    date : "03/07/2017",
    url : "https://youtu.be/zkOSR0ZRb9khttps://youtu.be/zkOSR0ZRb9k"
}, {
    pic : "/Images/playButton.png",
    info : "This in the the title for the third video.",
    date : "03/07/2017",
    url : "https://youtu.be/zkOSR0ZRb9khttps://youtu.be/zkOSR0ZRb9k"
}];

function populateListView() {
    Ti.API.trace("[DashboardController.js  >>  populateListView() >>]");
    if (!_.isEmpty(videoInfo)) {
        for (var i = 0; i < videoInfo.length; i++) {
            var item = {
                template : "videoTemplate",
                iconId : {
                    image : videoInfo[i].pic
                },
                titleId : {
                    text : videoInfo[i].info
                },
                dateId : {
                    text : videoInfo[i].date
                },
                urlId : {
                    text : videoInfo[i].url
                },
                properties : {
                    backgroundColor : "transparent"
                }
            };
            sections.push(item);
        }
       $.listSection.setItems(sections);
    }
}  
populateListView();
$.lView.addEventListener('click',function(e){
    var dataItem = $.listSection.getItemAt(e.itemIndex);    
});

And the .xml file for DashboardController isthis :

<Alloy>
    <View id="win2" class="container">
        <View id = "v1" class ="view1"  layout ="horizontal" >
            <Button class="btnBack" ></Button>
            <Label  class = "label1">LIST VIEW EXAMPLE</Label>
        </View>
        <View class="view2">
            <TextField id = "txtSearch"></TextField>
        </View>
        <ListView id = "lView" class = "list1" >
             <Templates>
                    <ItemTemplate name="videoTemplate">
                        <View class = "viewTemplate" layout = "horizontal" >
                            <ImageView bindId="iconId"  id="pic"  />
                            <View class = "viewTitle" layout = "vertical" >
                                <Label bindId="titleId" id="info" />
                                <View class="viewDtUrl" layout="horizontal" >
                                    <Label bindId="dateId" id="date" />
                                    <Label bindId="urlId" id ="url" /> 
                                </View>
                            </View>
                        </View>
                    </ItemTemplate> 
            </Templates>
            <ListSection id = "listSection">
            </ListSection>
        </ListView>   
    </View>
</Alloy> 

This is the .xml file of the controller that will be rendering the video player (VideoPlayerController) is this:

<Alloy>
    <View class="container">
        <VideoPlayer class = "video"></VideoPlayer>
        <View class="videoView">
            <Label class="titleInfo"></Label>
            <View class = "infoLabel">
                <Label class="dateInfo"></Label>
                <Label class="urlInfo"></Label>
            </View>>
        </View>
    </View>
</Alloy>

Answer 1

You are very close. Here are a couple of items:

1. Move the first line in DashboarController.js, Alloy.createController('VideoPlayerController',videoInfo[i]).getView(); down into the lView event listener.
2. The listview event we want to listen for is called itemclick, not click, so change that.
3. The videoInfo array is serving as our data collection. The itemclick callback will be returned the index of the row clicked, and this will match the order of our videoInfo array, so we can just pass it to createController as: videoInfo[e.itemIndex]
4. Lastly, createController is returning a view with .getView(), in our case, this probably a TiUIWindow object, so we need to open that window with .open().

This gives us:

$.lView.addEventListener('itemclick', function (e) {
    Alloy.createController('VideoPlayerController', videoInfo[e.itemIndex]).getView().open();
});

Now in our VideoPlayerController.js, we'll have something like:

var args = $.args;
console.log('video url:' + args.url);

From there, you can use the data passed to args to set up the rest of your window.