Javascript jQuery Mobile:具有单独页面的多页面应用程序：第二个页面未设置样式_Javascript_Jquery_Jquery Mobile

Javascript jQuery Mobile:具有单独页面的多页面应用程序：第二个页面未设置样式

javascript jquery jquery-mobile

Javascript jQuery Mobile:具有单独页面的多页面应用程序：第二个页面未设置样式,javascript,jquery,jquery-mobile,Javascript,Jquery,Jquery Mobile,我们有一个具有两个视图的单页应用程序（基本上是一个项目列表和一个所选项目的详细信息页面）。两个视图都位于单独的html文件中，我们使用sammy.js在页面之间进行转换/导航。在我们尝试添加jQuery Mobile之前，一切都很顺利。现在，当我们导航到第二个页面（详细信息页面）时，jquerymobile没有设置页面的样式我们的工作应用程序并没有按照jQuery Mobile的多页面模板所描述的那样设置（即，将所有页面div放在同一个html文件中，并使用它们的导航系统通过AJAX将链接页面

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

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

下面是一些代码片段，希望能帮助展示我们正在做什么。（注意：我们还使用ASP.NET razor视图。）

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>

在项目页面的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移动多页面应用程序具有实际独立的物理文件，并让所有页面都正确地获得样式？或者有没有一种编程方式可以强制jQuery Mobile正确设置所有页面的样式

谢谢。

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需要新页面时，将加载样式表

作为一个非英语国家的人，我希望你能理解我的话：）

正如菲尔·帕福德所指出的，这需要一个插件。也许有解决办法，但我从来没有让它发挥作用。我对require.js了解不多，但这可能也是一个解决方案，jQueryMobile网站上有关于jQueryMobile实现的文档。

        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);

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

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