Kendo ui 移动拆分视图导航问题答案

【问题标题】：Kendo ui mobile splitview navigation issueKendo ui 移动拆分视图导航问题
【发布时间】：2014-07-14 13:21:14
【问题描述】：

我尝试为通用应用设置示例。目前我被困在拆分视图中的导航。控制台记录一个错误，指出未找到链接“#rightOne”和“#rightTwo”。这是我的代码（kendo ui dojo 中的 testet）。代码调整为始终显示平板代码：

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <link href="http://cdn.kendostatic.com/2014.1.416/styles/kendo.common.min.css" rel="stylesheet" />
    <link href="http://cdn.kendostatic.com/2014.1.416/styles/kendo.default.min.css" rel="stylesheet" />
    <link href="http://cdn.kendostatic.com/2014.1.416/styles/kendo.mobile.all.min.css" rel="stylesheet" />
    <script src="http://cdn.kendostatic.com/2014.1.416/js/jquery.min.js"></script>
    <script src="http://cdn.kendostatic.com/2014.1.416/js/kendo.all.min.js"></script>
  <style>
    html, body, #phoneApp {
      height: 100%;
    }
  </style>
</head>

    <body>
        <div id="tabletApp" style="display:none;">
            <div data-role="splitview">
                <div data-role="pane" id="left" data-layout="leftLayout">
                    <div data-role="view">
                        <a href="#rightOne" data-target="right">One</a>
                        <a href="#rightTwo" data-target="right">Two</a>
                    </div>

                    <div data-role="layout" data-id="leftLayout">
                        <div data-role="header">
                          <div data-role="navbar">
                              TEST APP
                          </div>
                        </div>
                    </div>
                </div>
                <div data-role="pane" id="right" data-layout="rightLayout">
                    <div data-role="view" id="rightOne">
                       One
                    </div>
                    <div data-role="view" id="rightTwo">
                       Two
                    </div>
                    <div data-role="layout" data-id="rightLayout">
                      <div data-role="header">
                          <div data-role="navbar">
                              &nbsp;
                          </div>
                      </div>
                    </div>
                </div>        
           </div>
        </div>
        <div id="phoneApp" style="display:none;">
           <div data-role="view">
               <h1>Phone Home</h1>
           </div>
           <div data-role="view" id="about">
               <h1>Phone About</h1>
           </div>
           <div data-role="layout" data-id="phoneDefault">
               <div data-role="header">
                  <div data-role="navbar">
                        Phone App
                  </div>                       
               </div>
               <!--Content-->
               <div data-role="footer">
                   <div data-role="tabstrip">
                     <a href="" data-icon="home">Home</a>
                     <a href="#about" data-icon="info">About</a>
                   </div>
               </div>
           </div>
        </div>
        <script>
            $(function() {
                var app,
                //Must be mobile and tablet
                isTablet = kendo.support.mobileOS && kendo.support.mobileOS.tablet,
                    appElement = null,
                    appLayout = null;

                console.log("mobileOS Info/isTablet", kendo.support.mobileOS, isTablet);


                appElement = $("#tabletApp");
                appLayout = (isTablet) ? null : "phoneDefault";

                console.log(appElement);

                app = new kendo.mobile.Application(appElement, {
                    transition: 'slide'
                });

                //Adjust visibility of proper app container
                appElement.show();
            });
        </script>
    </body>
</html>

【问题讨论】：

标签： mobile kendo-ui kendo-mobile splitview

【解决方案1】：

如果您使用data-role="button" 将您的 2 个链接变成 Button 小部件，那么就可以了。

<a href="#rightOne" data-target="right" data-role="button">One</a>
<a href="#rightTwo" data-target="right" data-role="button">Two</a>

我不太确定为什么这会改变 Kendo 中的内部路由，但看起来当它是一个普通的 <a> 时，它会尝试实际导航而不是从 DOM 加载视图元素。

【讨论】：