Question

我在asp.net mvc移动应用程序中遇到抽屉问题。经过很多麻烦（可能是asp.net mvc助手中的一些错误）后我决定回滚到我的应用程序的javascript布局。

我遇到的唯一问题是我实现了一个似乎无法正常工作的抽屉菜单。

出于某种原因，剑道在我的网址中间生成一个＃，导致抽屉不显示。这是不起作用的网址：

http://localhost:55683/#/UnitDetails/Index/2

这就是它的工作原理：

http://localhost:55683/UnitDetails/Index/2#/

这是我在共享_Layout.cshtml中的标记：

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <link href="@Url.Content("~/Content/kendo/2013.2.716/kendo.common.min.css")" rel="stylesheet" type="text/css" />
    <link href="@Url.Content("~/Content/kendo/2013.2.716/kendo.mobile.all.min.css")" rel="stylesheet" type="text/css" />

    <script src="~/Scripts/jquery-1.8.2.min.js"></script>
    <script src="~/Scripts/kendo/2013.2.716/kendo.all.min.js"></script>
    <script src="~/Scripts/kendo/2013.2.716/kendo.mobile.min.js"></script>

    <link href="@Url.Content("~/Content/kendo/2013.2.716/kendo.dataviz.flat.min.css")" rel="stylesheet" type="text/css" />
</head>
<body>
        @RenderBody()

    <!--Main Layout -->
    <div data-role="layout" data-id="mainLayout">
        <div data-role="header">
            <div data-role="navbar">
                <span data-role="view-title"></span>
            </div>
        </div>

        <div data-role="footer">
            <div data-role="tabstrip">
                <a data-icon="action" href="~/Logout">Logout</a>
            </div>
        </div>
    </div>
</body>
</html>

这是我的UnitDetails-view的Index.cshtml：

<!-- Drawer layout -->
<div data-role="layout" data-id="drawer-layout">
    <header data-role="header">
        <div data-role="navbar">
            <a data-role="button" data-rel="drawer" href="#my-drawer" data-icon="drawer-button" data-align="left"></a>
            <span data-role="view-title"></span>
            @*<a data-align="right" data-role="button" class="nav-button" href="#index">Index</a>*@
            <a data-align="right" data-role="backbutton">Back</a>
        </div>
    </header>
</div>

<div id="drawer-home" data-role="view" data-layout="drawer-layout" data-title="Unit Details">
   <!-- Content removed for readability -->
    <div data-role="footer">
    </div>

</div>

<div data-role="drawer" id="my-drawer" style="width: 270px" data-views="['drawer-home']">
    <ul data-role="listview" data-type="group">
        <li>Mailbox
            <ul>
                <li data-icon="inbox"><a href="#drawer-home" data-transition="none">Inbox</a></li>
            </ul>
        </li>
</div>

<script>
    window.app = new kendo.mobile.Application(document.body, {
        layout: "drawer-layout",
        transition: "fade",
        skin: "flat",
        hideAddressBar: true
    });
</script>

Answer 1

剑道移动抽屉2013.2.918发生了一个错误，并修复了后来的内部版本。通过从抽屉中删除data-views属性来尝试一些调试。但这会导致抽屉通过滑动显示在所有视图中。

由于#in url，Kendo UI移动抽屉无法正常工作

1 个答案: