Question

我尝试使用kendoUI mobile为移动设备制作一些网页。在Android上一个IOS它工作正常，但后来我尝试了WP8，一切都坏了。直到现在我才能发现问题所以希望有人可以帮助我并告诉我错误在哪里。代码：

<div data-role="drawer" id="my-drawer" style="width: 96%;" data-views="['start']">
    <ul data-role="listview" data-type="group">
        <li>
            <ul>
               <li data-icon="" onclick="colorThis(this)" style="cursor:pointer">One</li>
               <li data-icon="" onclick="colorThis(this)" style="cursor:pointer">Two</li>
               <li data-icon="" onclick="colorThis(this)" style="cursor:pointer">Three</li>
               <li data-icon="" onclick="colorThis(this)" style="cursor:pointer">Four</li>
               <li data-icon="" onclick="colorThis(this)" style="cursor:pointer">Five</li>
            </ul>
        </li>
        <li>
            <ul>
               <li data-icon="" style="cursor:pointer" id ="" onclick="colorThis(this)">Six</li>
               <li data-icon="" style="cursor:pointer" id ="" onclick="colorThis(this)">Seven</li>
               <li data-icon="" style="cursor:pointer" id ="" onclick="colorThis(this)">Eight</li>
               <li data-icon="" style="cursor:pointer" id ="" onclick="colorThis(this)">Nine</li>
               <li data-icon="" style="cursor:pointer" id ="" onclick="colorThis(this)">Ten</li>
               <li data-icon="" style="cursor:pointer" id ="" onclick="colorThis(this)">Eleven</li>
            </ul>
        </li>
    </ul>
</div>
<div data-role="layout" data-id="drawer-layout">
    <div data-role="header">
        <div data-role="navbar">
            <a data-role="button" data-rel="drawer" href="#my-drawer" data-icon="search" data-align="left"></a>
            <span data-role="view-title"></span>
            <a data-align="right" data-role="button" class="nav-button" data-rel="external" data-icon="home" href="home.aspx"></a>
        </div>
    </div>
</div>
<div id = "start" runat="server" data-title="Aufgaben" data-role="view" data-layout="drawer-layout" style="">
        <div id="maindiv" data-role="page" style="display:block; text-align:center; height:100%" >
            <asp:Label runat="server" ID ="lbl_editorInfo" Text=""></asp:Label><br /><br />
            <asp:Label runat="server" ID ="lbl_taskStatus" Text="success"></asp:Label>
            <div style="width:99%"><input type="text" ID="search_txt" runat="server" class="km-text full" /></div><br />
            <ul id="taskList" style="width:99%"></ul>
        </div>
        <script type="text/x-kendo-tmpl" id="template">
            <div id="div_templ" style="cursor: pointer;" onclick="" >
                <div style="overflow:hidden; margin-top:5px; text-overflow:ellipsis; ">
                    <span class="" style="width:25%"></span><span class="" style="" title=""></span>
                </div>
                <div style="overflow:hidden; margin-top:2px; text-overflow:ellipsis;" >
                    <span class="" style="width:25%"></span><span class="" style="" title=""></span>
                </div>
            </div>
            <div style="clear:both" ></div>
        </script>

        <script type="text/javascript">
            var dataSource = new kendo.data.DataSource({
                transport:
            {
                read:
                {
                    url: url,
                    contentType: "application/json; charset=utf-8",
                    type: "GET",
                    dataType: "json"
                }
            },
                schema:
            {
                data: 'GetDATAResult.RootResults',
                total: 'GetDATAResult.TotalCount'
            },
                pageSize: 10,
                serverPaging: true
            });

            function checkTheBox(chkBoxID) {
                var theBox = document.getElementById(chkBoxID);
                if (theBox.checked) {
                    theBox.checked = false;
                }
                else {
                    theBox.checked = true;
                }
                colorThis(theBox);
            }

            function colorThis(t) {
                if (!($(t).hasClass("background_orange"))) {
                    $(t).addClass("background_orange");
                }
                else {
                    $(t).removeClass("background_orange");
                }
            }

            $("#taskList").kendoMobileListView({
                dataSource: dataSource,
                template: $("#template").text()

            });

            var app = new kendo.mobile.Application($(document.body),
            {
                loading: "<h1>Loading...</h1>"
            });
        </script>

在WP上只有简单的html，没有来自kendoUI的样式或javascript。

问候，添

Answer 1

我面临同样的问题。你能找到什么吗？

在初步调查中，似乎WP8中的IE浏览器主动阻止它收到的回调。有关此行为的一些信息可以在这里找到： http://blogs.msdn.com/b/ieinternals/archive/2010/09/27/ie9-beta-google-image-search-javascript-content-type-and-nosniff.aspx

此外，如果您创建数据源的JSBin，则可以在IE浏览器开发者工具窗口中检查错误 - ＆gt;安慰：脚本来自由于mime类型不匹配而被阻止

对不起，我还没有解决这个问题。我刚刚分享了一些调查结果。

在WP8上打破Web应用程序布局

1 个答案: