Creating a blog reader app

2 posts, 0 answers
  1. Tunde
    Tunde avatar
    4 posts
    Member since:
    Jul 2013

    Posted 10 Jul 2013 Link to this post

    I am currently programing a blog reader application using HTML5 KendoUI Mobile & JavaScript currently i am able to use Json to list all my post in a list view and currently once an item is clicked on it takes me to the actual url of the post within the application. What i want to be able to do is once an item is clicked on display post content in a different view. Please help me!!!

    <div data-role="view" data-init="mobileListViewPullToRefresh" data-title="What's New" id="tabstrip-whatsnew" data-layout="mobile-tabstrip">
     
        <ul id="pull-to-refresh-listview"></ul>
    </div>
     
    <script id="pull-to-refresh-template" type="text/x-kendo-template">
        <div class="post">
            <a href="#= url #"><img class="menuimage" src="#= thumbnail_images.full.url #" alt="#= title #" /></a>
            <a href="#= url #"><span class="title">#= title #</span> </a>
        </div>
    </script>
     
    <script>
        function mobileListViewPullToRefresh() {
                var dataSource = new kendo.data.DataSource({
                    serverPaging: true,
                    pageSize: 10,
                    transport: {
                        read: {
                            url: "http://www.iviewsource.com/?json=recentstories", // the remote service url - Twitter API v1.1
                            dataType: "jsonp" // JSONP (JSON with padding) is required for cross-domain AJAX
                        },
                        parameterMap: function(options) {
                            return {
                                q: "javascript",
                                count: options.pageSize
                            };
                        }
                    },
                    schema: { // describe the result format
                        // the data which the data source will be bound to is in the "results" field
                        data: function(data) {
                            return data.posts || [];
                        }
                    }
                });
     
            $("#pull-to-refresh-listview").kendoMobileListView({
                dataSource: dataSource,
                pullToRefresh: true,
                appendOnRefresh: true,
                template: $("#pull-to-refresh-template").text()
            });
        }
    </script>
  2. Petyo
    Admin
    Petyo avatar
    2444 posts

    Posted 11 Jul 2013 Link to this post

    Hello Tunde,

    A list -> detail navigation pattern is demonstrated in our demo sushi application. In your case, you may have to perform an additional ajax request in the detail view show event handler in order to display the post contents. 

    Regards,
    Petyo
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top