2

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

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

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

索引.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 正确设置所有页面的样式？

谢谢。

4

1 回答 1

0

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 需要一个新页面时，您的样式表将被加载。

作为一个不会说英语的人，我希望你能理解我的话:)

于 2013-01-22T10:28:53.790 回答