Question

我在代码中定义了JSON和图像，标题，日期和网址。这将用于填充列表视图。在任何列表项的click事件中，我需要导航到一个不同的控制器并在其中呈现视图，其中视频播放器根据点击的列表项的URL来播放视频，我想显示日期和标题太。我不知道如何在itemClick事件中对此进行编码。请帮忙！

这是DashboardController的.js文件。

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

DashboardController的.xml文件是：

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

这是将呈现视频播放器的控制器的.xml文件（VideoPlayerController）是这样的：

<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

你非常接近。这里有几个项目：

将DashboarController.js中的第一行Alloy.createController('VideoPlayerController',videoInfo[i]).getView();向下移动到lView事件侦听器。
我们想要侦听的listview事件名为itemclick，而不是click，因此请更改。
videoInfo数组用作我们的数据集合。 itemclick回调将返回所点击行的索引，这将与我们的videoInfo数组的顺序相匹配，因此我们可以将其作为createController传递给videoInfo[e.itemIndex] }
最后，createController返回的视图为.getView()，在我们的示例中，这可能是TiUIWindow个对象，因此我们需要使用.open()打开该窗口。< / LI>
这给了我们：
```
$.lView.addEventListener('itemclick', function (e) {
    Alloy.createController('VideoPlayerController', videoInfo[e.itemIndex]).getView().open();
});
```
现在在我们的VideoPlayerController.js中，我们会有类似的内容：
```
var args = $.args;
console.log('video url:' + args.url);
```
从那里，您可以使用传递给args的数据来设置窗口的其余部分。

列表视图itemclick事件appcelerator

1 个答案: