Template issue Kendo mobile, maybe

StackOverflow https://stackoverflow.com/questions/18225108

Вопрос

I am trying to create a RSS reader (atom format). I read the feed from a Blogspot site. I bind the datasource to a ListView and use a template to format the result. But issue is I get a white space on the top of my header. See attachment. Everything is working running in the simulator (Icenium Graphite) it's only an issue on the device IPhone.

What is wrong?

Here is my code:

index.html

<body>
    <div data-role="view" id="tabstrip-home" data-title="Nyheder" data-model="viewModel" data-layout="tabstrip-layout">
        <div data-role="content" class="weather">
            <ul id="news" data-role="listview" data-template="newsItems" data-style="inset" data-bind="source: dataSource"
                class="inboxList">
            </ul>
        </div>
    </div>

    <scripts id="newsItems" type="text/x-kendo-template">
        <a href="\\#newsDetails?newsID=#= Id#">
            <h3 class="time">Udgivet #: publishedDate#</h3>

            <h3>Af #: author #</h3>

            <h2>#: title#</h2>
        </a>
    </scripts>


    <div id="newsDetails" data-role="view" data-show="onViewShow" data-model="viewModel" data-title="Nyheder!">
        <ul id="info" data-role="listview" data-style="inset">
            <li>
                <span data-bind="html: selectedNews.content"></span>
                <br>
                <hr>
                <h5>
                    Skrevet af:
                    <div data-bind="text: selectedNews.author"/>
                </h5>
                <h5>
                    Skrevet den:
                    <div data-bind="text: selectedNews.publishedDate"/>
                </h5>
                <a data-role="backbutton">Tilbage</a>
            </li>
        </ul>
    </div>

    <script id="row-template" type="text/x-kendo-template">
        <tr>
            <td data-bind="html: selectedNews.content">
            </td>
            <td>

            </td>
            <td data-bind="selectedNews.publishedDate"></td>

        </tr>
    </script>


    <!--Layout-->
    <div data-role="layout" data-id="tabstrip-layout">

        <!--Header-->
        <div data-role="header">
            <div data-role="navbar">
                <span data-role="view-title"></span>
            </div>
        </div>

        <!--Footer-->

    </div>
</body>

RSSFeed.js

viewModel = kendo.observable({
    dataSource: new kendo.data.DataSource({
        transport: {
            read        : {
                url     : 'http://ajax.googleapis.com/ajax/services/feed/load?v=1.0&num=10&callback=?&q=' + encodeURIComponent('http://feeds.feedburner.com/VenstreIEgedal'),
                dataType: "json"
            },
            parameterMap: function (options, operation) {
                if (operation !== "read" && options.models) {
                    return {models: kendo.stringify(options.models)};
                }
            }
        },
        schema   : {
            model: {
                id    : "Id",
                fields: {
                    Id   : {type: "int"},
                    title: {type: "string"}
                }
            },

            data: function (response) {
                var articleLength = response.responseData.feed.entries.length;
                articleLength = (articleLength > 20) ? 20 : articleLength;
                for (var i = 1; i <= articleLength; i++) {
                    var entry = response.responseData.feed.entries[i - 1];
                    var entrydate = new Date(entry.publishedDate) //get date of entry
                    var entrydatestr = entrydate.getDate() + "-" + (entrydate.getMonth() + 1) + "-" + entrydate.getFullYear();
                    newsData.push({Id: i, title: entry.title, content: entry.content, author: entry.author, publishedDate: entrydatestr});
                }

                //return response.responseData.feed.entries;
                return newsData
            }
        }
    }),

});

function onViewShow(e) {
    var newsId = e.view.params.newsID, dataitem = viewModel.dataSource.get(newsId);

    viewModel.set("selectedNews", dataitem);
}
Это было полезно?

Решение

Make sure you're on latest Kendo, Icenium usually lags behind with the version and they do not auto upgrade whenever new is available.

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top