列表视图 itemclick 事件 appcelerator
List view itemclick event appcelerator
我在代码中定义了 JSON 和图像、标题、日期和 url。这将用于填充列表视图。在任何列表项的单击事件中,我需要导航到另一个控制器并在其中呈现视图,其中包含根据单击的列表项 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>
这是将呈现视频播放器 (VideoPlayerController) 的控制器的 .xml 文件是这样的:
<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>
你们很亲近。这里有几个项目:
- 将 DashboarController.js 中的第一行向下移动到
lView
事件侦听器中。
- 我们要侦听的列表视图事件称为
itemclick
,而不是 click
,因此更改它。
videoInfo
数组用作我们的数据收集。 itemclick
回调将返回被点击行的索引,这将匹配我们 videoInfo
数组的顺序,所以我们可以将它传递给 createController
作为:videoInfo[e.itemIndex]
- 最后,
createController
返回一个带有 .getView()
的视图,在我们的例子中,这可能是一个 TiUIWindow
对象,所以我们需要用 window 打开那个 .getView()
=24=].
这给了我们:
$.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
的数据来设置 window 的其余部分。
我在代码中定义了 JSON 和图像、标题、日期和 url。这将用于填充列表视图。在任何列表项的单击事件中,我需要导航到另一个控制器并在其中呈现视图,其中包含根据单击的列表项 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>
这是将呈现视频播放器 (VideoPlayerController) 的控制器的 .xml 文件是这样的:
<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>
你们很亲近。这里有几个项目:
- 将 DashboarController.js 中的第一行向下移动到
lView
事件侦听器中。 - 我们要侦听的列表视图事件称为
itemclick
,而不是click
,因此更改它。 videoInfo
数组用作我们的数据收集。itemclick
回调将返回被点击行的索引,这将匹配我们videoInfo
数组的顺序,所以我们可以将它传递给createController
作为:videoInfo[e.itemIndex]
- 最后,
createController
返回一个带有.getView()
的视图,在我们的例子中,这可能是一个TiUIWindow
对象,所以我们需要用 window 打开那个.getView()
=24=].
这给了我们:
$.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
的数据来设置 window 的其余部分。