Kendo UI Page Header Disappears

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

Вопрос

I am currently experimenting with KendoUI vs. jQuery Mobile and am running into something that just makes no sense. In trying to build an SPA for a mobile app, I have a seemingly basic structure setup of header, content area and footer based on combining together multiple samples.

When I click on "Block #1" it does in fact navigate to my secondary view, but my shared header disappears (footer stays put). For the life of me, I can't get the header to stay put - I've tried using standard href tags, anchor tags (i.e. #), the Kendo router option and even manual app.navigate() to no avail. I've even tried a combination of a true SPA (i.e. template is embedded with a style="display: none;" on it as well as using a Views folder with the HTML inside that and the header just won't stay put. Probably the strangest thing is, when I refresh the page (after clicking one of the items), the header shows up on refresh. So it's like something is clearing it, but I have no idea what.

Any guesses? Here is my sample code:

<!DOCTYPE html>

<html>
<head>
    <title>Sample App</title>

    <!-- Kendo UI -->
    <link href="_assets/kendo/css/kendo.common.min.css" rel="stylesheet" />
    <link href="_assets/kendo/css/kendo.rtl.min.css" rel="stylesheet" />
    <link href="_assets/kendo/css/kendo.default.min.css" rel="stylesheet" />
    <link href="_assets/kendo/css/kendo.dataviz.min.css" rel="stylesheet" />
    <link href="_assets/kendo/css/kendo.dataviz.default.min.css" rel="stylesheet" />
    <link rel="stylesheet" type="text/css" href="_assets/kendo/css/kendo.mobile.all.min.css">

    <!-- Custom -->
    <!--<link rel="stylesheet" media="screen" type="text/css" href="_assets/css/styles.css" />-->
    <script src="_assets/kendo/js/jquery.min.js"></script>
    <!--<script src="_assets/kendo/js/kendo.all.min.js"></script>-->
    <script src="_assets/kendo/js/kendo.mobile.min.js"></script>
    <style>
        .km-navbar,
        .bottom_tools
        {
            background-color: #445B78 !important;
        }

        .km-button
        {
            border: none !important;
        }
    </style>

</head>
<body>

<section data-role="layout" data-id="default">
    <header data-role="header">
        <div data-role="navbar">
            <div class="section homescreen">
                <div class="texture">
                    <div class="col_content">
                        <div class="col_16">
                            ** Should Be a Sticky Header **
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </header>

    <!--View content will render here, but doesn't -->

    <footer data-role="footer">
        <div data-role="tabstrip">
            <div class="bottom_tools">
                <div class="bottom-tool-buttons">app button</div>
            </div>
        </div>
    </footer>
</section>

<div id="home" data-role="view" data-layout="default">
    <div class="col_content">
        <div class="col_16 textaligncenter">
            <div class="box boxA">
                <div class="content">
                    <!-- Standard HREF linking to a view, but view is a mimic of the sample-template option below -->
                    <a data-role="button" href="views/reminder/index.html">
                        Box #1
                    </a>
                </div>
            </div>
            <div class="box boxB">
                <div class="content">
                    <!-- Link with the '#' -->
                    <a data-role="button" href="#sample-template">
                        Box #2
                    </a>
                </div>
            </div>
            <div class="box boxC">
                <div class="content">
                    <!-- Link without the '#' -->
                    <a data-role="button" href="sample-template">
                        Box #3
                    </a>
                </div>
            </div>
            <div class="box boxD">
                <div class="content">
                    <a href="views/location/index.html" data-role="button">
                        Box #4
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Sample Template - this is the exact same thing in views/reminder/index.html  -->
<div id="sample-template" data-role="view" data-title="Test Title" data-transition="overlay:up" data-persist="true" style="display:none;" data-layout="default">
    <strong style="font-size: 500px;">heyo</strong>
</div>

<script>
    var app = new kendo.mobile.Application(document.body,
              {
                  transition: 'slide'
              });
</script>

</body>
</html>
Это было полезно?

Решение

This was a known issue in the Q1 release. Upgrade to the latest.

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