The demo for Telerik Platform, hybrid Step 1 returns a blank screen -- there seems to be a missing { in the generated code at line 26
app = new kendo.mobile.Application(document.body);
}, false);
and cutting and pasting to replace that line with app = new kendo.mobile.Application(document.body, { layout: "main-layout" });
provides no help. Below is my code for app.js
(function () {
var app;
window.Books = {
data: new kendo.data.DataSource({
transport: {
read: {
url: "data/books.js",
type: "get",
dataType: "json"
}
},
schema: {
data: "books"
}
}),
back: function() {
},
settings: function() {
}
};
document.addEventListener("deviceready", function () {
navigator.splashscreen.hide();
app = new kendo.mobile.Application(document.body);
}, false);
window.app = app;
}());
----------------------------
and here for index.html
<!DOCTYPE html>
<html>
<head>
<title>Great Books</title>
<meta charset="utf-8" />
<link href="kendo/styles/kendo.mobile.all.min.css" rel="stylesheet" />
<link href="css/main.css" rel="stylesheet" />
<script src="cordova.js"></script>
<script src="kendo/js/jquery.min.js"></script>
<script src="kendo/js/kendo.mobile.min.js"></script>
<script src="js/app.js"></script>
<script src="js/details.js"></script>
<script src="js/favorites.js"></script>
</head>
<body>
<div data-role="view" id="index" data-title="Books">
<ul data-role="listview" data-source="Books.data" data-template="books-template"></ul>
</div>
<script type="text/x-kendo-template" id="books-template">
<a href="views/details.html?##id=#: isbn #">
<div class="bookImage"><img src="#: image_url #" />
</div>
<div class="bookTitle">#: name #</div>
<div class="bookAuthor">#: author #</div>
</a>
</script>
<!-- Add Tutorial Markup Here -->
<div data-role="layout" data-id="main-layout">
<div data-role="header">
<div data-role="navbar">
<span data-role="view-title"></span>
</div>
</div>
<div data-role="footer">Footer</div>
</div>
</body>
</html>