Question

我目前正在尝试使用KendoUI和jQuery Mobile，并且遇到了一些毫无意义的事情。在尝试为移动应用程序构建SPA时，基于将多个样本组合在一起，我有一个看似基本的头部，内容区域和页脚结构设置。

当我点击“Block＃1”时，它确实导航到我的辅助视图，但我的共享标题消失了（页脚保持不变）。对于我的生活，我无法得到标题 - 我尝试使用标准href标记，锚标记（即#），剑道router选项和甚至手动app.navigate()无济于事。我甚至试过了一个真正的SPA的组合（即模板嵌入了style="display: none;"，并使用了一个带有HTML的视图文件夹，并且标题不会保持不变。可能是最奇怪的事情是，当我刷新页面时（点击其中一个项目后），标题会在刷新时出现。所以它就像是清除了它，但我不知道是什么。

任何猜测？这是我的示例代码：

<!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>

Answer 1

这是Q1版本中的一个已知问题。升级到最新版本。

Kendo UI页面标题消失

1 个答案: