mobile listview templates

by valchev

HTML

<script src="http://cdn.kendostatic.com/2012.1.322/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.1.322/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.1.322/styles/kendo.mobile.all.min.css">
<div data-role="view" data-init="init" data-title="ListView">
    <ul id="myListView"></ul>
</div>

JavaScript

var app = new kendo.mobile.Application(document.body);

datasource = new kendo.data.DataSource({
    transport: {
        read: {
            //using jsfiddle echo service to simulate JSON endpoint
            url: "http://api.themoviedb.org/2.1/Movie.browse/en-US/json/bc96c7b4bdd6de03d7e4367b08a6358c?year=2012&order_by=release&order=desc&genres=28",
            dataType: "jsonp"
        }
    },
    schema: {
        data: function(data) {
            var result = [];
            for(var i=0; i < data.length; i++) {
                if(data[i].posters[0]) {
                    var poster = {
                        url: data[i].posters[0].image.url
                    }    
                    result.push(poster);
                }
            }
            return result;
        }            
    }
});

function init() {
    $("#myListView").kendoMobileListView({
        dataSource: datasource,
        template: '<img src="#= url #" />'
    });
}