photo album tutorial need help

3 posts, 0 answers
  1. John
    John avatar
    5 posts
    Member since:
    Oct 2015

    Posted 09 Oct 2015 Link to this post

    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. Dimitrina
    Admin
    Dimitrina avatar
    3769 posts

    Posted 09 Oct 2015 Link to this post

    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.

     
  3. John
    John avatar
    5 posts
    Member since:
    Oct 2015

    Posted 09 Oct 2015 Link to this post

    thanks for your help Dimitrina, the solution is working fine now.

Back to Top