使用JSON列出视图

Question

我想使用下面代码中提到的JSON填充我的listview。但它会将任何项目添加到我创建的列表视图中。这是.xml文件，我在其中编写了视图的代码。

 <Alloy>
    <View id="win2" class="container">
        <View id = "v1" class ="view1"  layout ="horizontal" >
            <Button class="btnBack" ></Button>
            <Label  class = "label1">List</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="pic" id="iconId"  />
                            <View class = "viewTitle" layout = "vertical" >
                                <Label bindId="info" id="titleId" />
                                <View class="viewDtUrl" layout="horizontal" >
                                    <Label bindId="date" id="dateId" />
                                    <Label bindId="url" id ="urlId" /> 
                                </View>
                            </View>
                        </View>
                    </ItemTemplate> 
            </Templates>
            <ListSection id = "listSection">
            </ListSection>
        </ListView>   
    </View>
</Alloy> 

这是.js文件。

    /*
* Controller : DashboardController.js
* To display the listview lView
* Author : Sayali Chavan
* */

// Arguments passed into this controller can be accessed via the `$.args` object directly or:
var args = $.args;

var sections = [];
//JSON to populate the listview
var videoInfo = [{
    pic : "/Images/abstract-logo-with-colorful-leaves_1025-695.jpg",
    info : "This in the the title for the first video.",
    date : "03/07/2017",
    url : "https://youtu.be/zkOSR0ZRb9khttps://youtu.be/zkOSR0ZRb9k"
}, {
    pic : "/Images/abstract-logo-with-colorful-leaves_1025-695.jpg",
    info : "This in the the title for the second video.",
    date : "03/07/2017",
    url : "https://youtu.be/zkOSR0ZRb9khttps://youtu.be/zkOSR0ZRb9k"
}, {
    pic : "/Images/abstract-logo-with-colorful-leaves_1025-695.jpg",
    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();