Question

我们有一个包含两个视图的单页面应用程序（基本上是项目列表和所选项目的详细信息页面）。两个视图都在单独的html文件中，我们使用sammy.js在页面之间转换/导航。在我们尝试添加jQuery Mobile之前，一切都很顺利。现在，当我们导航到第二页（详细信息页面）时，jQuery Mobile没有为页面设置样式。

我们的工作应用程序没有像jQuery Mobile的多页面模板所描述的那样设置（即，将所有页面div放在同一个html文件中，并使用他们的导航系统通过AJAX将链接页面加载到DOM中）。但是，是否可以使用单独的页面，使用除jQuery Mobile导航之外的其他内容，并且仍然在第二页上使用jQuery Mobile样式？或者，有没有办法强制jQuery Mobile设置第二页的样式？

这里有一些代码片段，希望有助于展示我们正在做的事情。（注意：我们也使用ASP.NET剃刀视图。）

index.cshtml

<body>
    @RenderPage("Views/items.cshtml")
    @RenderPage("Views/item.cshtml")

    @Scripts.Render("~/bundles/jquery")
    <script>
        $(document).bind("mobileinit", function () {
            $.mobile.ajaxEnabled = false;
            $.mobile.hashListeningEnabled = false;
            $.mobile.pushStateEnabled = false;
            $.mobile.loader.prototype.options.text = "loading.  please wait...";
            $.mobile.loader.prototype.options.textVisible = true;
        });
    </script>
    @Scripts.Render("~/bundles/jquerymobile", ...)
</body>

items.cshtml（此页面可以正确加载和渲染）

<section id="items-view" class="view" data-role="page">
    <section data-role="header">
        ....
    </section>

    <section data-role="content">
        (navbars, ULs, LIs, etc. are here, with each LI a link to go to the details page)
    </section>

    <section data-role="footer">
        ....
    </section>
</section>

item.cshtml（此页面已加载但未正确呈现，没有jQuery Mobile样式）

<section id="item-view" class="view" data-role="page">
    <section data-role="header">
        ....
    </section>

    <section data-role="content">
        (ULs, LIs, listboxes, textboxes, etc. are here)
    </section>

    <section data-role="footer">
        ....
    </section>
</section>

router.js（用于在页面之间路由）

....
            navigateTo = function (url) {
                sammy.setLocation(url);  // url = #/items or #/item/1234
            },
....

在项目页面的js文件中，我们尝试过：

        var $page = $("#item-view");
        //$page.trigger("create");
        //$page.listview("refresh");
        //$page.page();  (this one kind of work but doesn’t style every object)
        //$page.page("refresh", true);

但是没有任何东西可以正常完成。

因此，根据我们的情况，有没有办法让jQuery Mobile多页面应用程序包含实际的单独物理文件，并且所有页面都能正确地获得样式？或者是否有一种程序化的方法来强制jQuery Mobile正确地设置所有页面的样式？

感谢。

Answer 1

jquery mobile不会从第二页加载所有内容。当你需要一个带有JQM的新页面（或者它是ajax方法）时，它会加载页面的部分DOM并获取所有内容

<div data-role="page" id="yourPageID"></div>

所以您可以尝试将样式表放在“数据角色”下，如下所示：

<div data-role="page" id="yourPageID">
    <link rel="stylesheet" href="yourStyleSheetLink.css" />
</div>

然后，当JQM需要新页面时，将加载样式表。

作为非英语人士，我希望你能理解我的话：）

jQuery Mobile：具有单独页面的多页面应用程序：第二页未获得样式

1 个答案: