I've been trying to get the photo album interactive tutorial for the Telerik platform to work, and all is well up until step 3. In step 4 a function is added to add an image to a listview. I can get the button in the app, but it does not respond, i.e. no image is added to the listview (not in emulator, not on real phone which is a Windows phone).
Any hints? A link to where I can download the actual solution to the tutorial would also help a lot.
thanks! Andy
my app.js (probably where the error is):
(function () {
document.addEventListener("deviceready", function () {
window.listView = kendo.observable({
addImage: function () {
$("#images")
.data("kendoMobileListView")
.prepend(["images/08.jpg"]);
}
});
var app = new kendo.mobile.Application(document.body, {
skin: "flat"
});
$("#images").kendoMobileListView({
dataSource: ["images/01.jpg", "images/02.jpg", "images/03.jpg", "images/04.jpg", "images/05.jpg", "images/06.jpg", "images/07.jpg"],
template: "<img src='#: data #'>"
});
navigator.splashscreen.hide();
});
}());
and my index.html:
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<link href="kendo/styles/kendo.mobile.all.min.css" rel="stylesheet">
<link href="styles/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="scripts/app.js"></script>
</head>
<body>
<div data-role="view" data-model="listview" data-title="Photos">
<div data-role="navbar">
<span data-role="view-title"></span>
<button data-role="button" data-align="left" data-bind="click: addImage">Add</button>
</div>
<ul id="images"></ul>
</div>
</body>
</html>
6 Answers, 1 is accepted
Thank you for contacting us and for starting the Telerik Platform tutorial lessons.
In fact, your code is right, only it seems that the ViewModel passed to the view (data-model="viewmodel") is named viewmodel, and the code in app.js reads window.viewModel. The proper binding would be data-model="viewModel".
This is needed for the initialization of the Kendo Mobile Application in app.js:
var app = new kendo.mobile.Application(document.body, { skin: "flat" });The initialized Application locates the declaratively initialized (with the data- attributes) Kendo UI widgets (View, Navbar, etc.) and their respective ViewModels. Then they are rendered when the "deviceready" event is received.
I hope that this will be helpful for you in order to continue with our Getting Started tutorials.
For your further reference I am attaching the completed first tutorial lesson in case you need it. To run it - just enter the API key of your Backend Services project at line 3 of app.js.
Please, let me know if I may be of any further assistance.
Regards,
Anton Dobrev
Telerik
Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.
Rank 1
Your hint about the viewmodel name was absolutely correct, I can't believe I overlooked this again and again. Anyway, I'm back on track now.
Thanks for your very helpful reply.
Andy
Rank 1
Would anyone happen to have a completed photo album project that includes the views folder?
Thanks,
@Andy
I am glad that this worked on your side.
@Brian
The tutorial that works with the app layout, navigation and views is about a separate app, called Books.
Could you be more specific about this? If you are having any troubles with the tutorial - please, specify them in a separate thread and we will be happy to assist you.
If you are referring to the Photo Album tutorial - it is attached in its completed state in this thread.
Let me know if you have further questions.
Regards,
Anton Dobrev
Telerik
Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.
Rank 1
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>
Looking at the shared code snippets, it seems you are referring to the "Create App layout and navigation" tutorial, Lesson 1: "Working with app layouts".
Point e. states: Open the app.js file in the js folder and modify the Kendo UI application constructor to include your layout:
app = new kendo.mobile.Application(document.body, { layout: "main-layout" });
Although you mention it, this change seem to not be presented in the specific code for app.js you shared. You could also test the completed great-books-app (there is a big blue button Try in AppBuilder) to verify how it is supposed to work. Would you please ensure that you have applied all the steps listed in the guidance?
Regards,
Dimitrina
Telerik