Kendo UI Mobile viewlist issue

Kendo UI Mobile viewlist issue

I'm new to Kendo UI Mobile and I'm trying to display a list of wines from
a JSON object for a mobile app I'm trying to create.
When the app is launched nothing happends, so I guess something is not
linked up properly.
Can anyone take a look and see what is wrong?
JSON
{
"wine": [
{
"id": "9",
"name": "BLOCK NINE",
"year": "2009",
"grapes": "Pinot Noir",
"country": "USA",
"region": "California",
"description": "With hints of ginger and spice, this wine makes an
excellent complement to light appetizer and dessert fare for a
holiday gathering.",
"picture": "block_nine.jpg"
},
{
"id": "11",
"name": "BODEGA LURTON",
"year": "2011",
"grapes": "Pinot Gris",
"country": "Argentina",
"region": "Mendoza",
"description": "Solid notes of black currant blended with a light
citrus make this wine an easy pour for varied palates.",
"picture": "bodega_lurton.jpg"
}
]
}
HTML
<div id="tabstrip-winelist"
data-role="view"
data-layout="tabstrip-layout"
data-title="Wine List"
data-transition=""
data-model="app.winelistService.viewModel">
<div class="winelist">
<ul class="winelist"
data-role="listview"
data-bind="source: winelistDataSource">
<li>${name}</li>
</ul>
</div>
</div>
<div data-role="layout" data-id="tabstrip-layout" ></div>
wine.js
(function(global) {
var WinelistViewModel,
app = global.app = global.app || {};
WinelistViewModel = kendo.data.ObservableObject.extend({
winelistDataSource: null,
init: function () {
var that = this,
dataSource;
kendo.data.ObservableObject.fn.init.apply(that, []);
var wine_model = kendo.data.Model.define({
id: "id",
name: "name",
year: "year",
grapes: "grapes",
country: "country",
region: "region",
description: "description",
picture: "picture"
});
dataSource = new kendo.data.DataSource({
transport: {
read: {
url: "http://www.mydomain.co.uk/api/wines",
dataType: "json"
}
},
schema: {
model: "wine_model"
}
});
that.set("winelistDataSource", dataSource.wine);
}
});
app.inelistService = {
viewModel: new WinelistViewModel()
};
})(window);