CardView in a list


#1

i tried having a list of CardView but it doesnt seem to display.

heres my code:
XML

xmlns:Card="nativescript-cardview"
loaded="pageLoaded"
<Card:CardView id="myCard" items="{{myCardsArray}}" class="cardStyle" margin="5" elevation="5" radius="10">
                    <Card:CardView.itemTemplate>
                        <Card:CardViewItem  tap="{{ tap }}">
                       <grid-layout rows="50,50" columns="auto, auto">
                           <image src="{{ images }}" class="card-img" stretch="aspectFill" rowSpan="2" col="0" />
                           <label text="{{titles}}" class="info info_title" textWrap="true" row="0" col="1" />
                           <label text="{{desc}}" class="info info_desc" textWrap="true" row="1" col="1" />
                       </grid-layout>
                       </Card:CardViewItem>
                    </Card:CardView.itemTemplate>
</Card:CardView>

JS

var pageData = new observableModule.Observable();
var myCardsArray = [
    {tap:"viewMap", images:"~/images/icons/map.png", titles:"Campud Map", desc:"Find your way through the campus!"},
    {tap:"viewMap", images:"~/images/icons/handbook.png", titles:"Student Handbook", desc:"All the things you need to know!"},
    {tap:"viewMap", images:"~/images/icons/document.png", titles:"Downloadables", desc:"Files, files everywhere."}
];

var myCard = null;
pageData.set("myCardsArray", myCardsArray);

function pageLoaded(args) {
    var page = args.object;
    page.bindingContext = pageData;
    myCard = page.getViewById("myCard");
}

exports.pageLoaded = pageLoaded;

This works perfectly with the Carousel Plugin.
am I missing something?