This is a migrated thread and some comments may be shown as answers.

[Solved] photo album tutorial need help

2 Answers 169 Views

General Discussion

This is a migrated thread and some comments may be shown as answers.

This question is locked. New answers and comments are not allowed.

John asked on 09 Oct 2015, 05:24 AM

I'm learning the Photo Album tutorial and get stuck in lesson 4/7 step 4.

Here is my code:

<body>

<div data-role="view" data-title="Photos" data-model="listview">

<div data-role="navbar">

<span data-role="view-title"></span>

<button data-role="button" data-align="right" data-bind="click: addImage">Add</button>

</div>

<ul id="images"></ul>

</div>

<div data-role="layout" data-id="main-layout">

<div data-role="header">Header</div>

<div data-role="footer">Footer</div>

</div>

</body>

In app.js file:

01.(function () {

02. document.addEventListener("deviceready", function () {

03. window.listview = kendo.observable({

04. addImage: function() {

05. $("#images").data("kendoMobileListView").prepend([ "images/08.jpg" ]);

06. }

07. });

08. var app = new kendo.mobile.Application(document.body, { skin: "nova" });

09.

10. });

11.}());

I'm try many times and still not working. what have i done wrong?

thanks.

2 Answers, 1 is accepted

answered on 09 Oct 2015, 11:37 AM

Hello John,

It seems you have commented the code for initializing the listview.

The final code snippet should look like:

document.addEventListener("deviceready", function () {

navigator.splashscreen.hide();

$("#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 #'>"

});

window.listview = kendo.observable({

addImage: function() {

$("#images")

.data("kendoMobileListView")

.prepend([ "images/08.jpg" ]);

}

});

var app = new kendo.mobile.Application(document.body, { skin: "nova" });

});

As a result after pressing the Add button, image 08.jpg will be inserted and visualized on top of the list of populated images.

I hope this helps. Let me know if any additional questions arise.

Regards,
Dimitrina
Telerik

Visit the Telerik Verified Plugins Marketplace and get the custom Cordova plugin you need, already tweaked to work seamlessly with AppBuilder.