WebSharper JQuery 移动页面隐藏

Question

我正在尝试使用 F# WebSharper 框架构建一个 JQuery Mobile 站点。在 WebSharper 用语中，我使用由 Sitelet 提供服务的 JQueryMObile 控件创建了一个 Pagelet。一切都编译并运行，问题出在生成的 html 中。

我声明的页面 (simplePage) 明显存在于标记中，并使用 JQueryMobile css 类 ui-active 进行标记以使其可见。但是，它被一个 div 包围，该 div 也是一个页面，但没有用活动的 css 类标记，使其不可见。因此我在这个 div 中的页面是隐藏的。 我没有创建这个包含页面的 div。这似乎是在 html 头中加载 JQueryMobile 脚本的副作用。我怎样才能摆脱它？

我以http://websharper.com/samples/JQueryMobile 为例。我正在使用 WebSharper 版本 2.5.125.62 和 WebSharper.JQueryMobile 版本 2.5.4.198。我有一个如下所示的相关代码文件，后跟生成的 html。

主要：

open IntelliFactory.Html
open IntelliFactory.WebSharper
open IntelliFactory.WebSharper.Html
open IntelliFactory.WebSharper.JQuery
open IntelliFactory.WebSharper.Sitelets

type Action = | Home

[<JavaScript>]
module MyJQueryContent =

    let Main() =
        JQuery.Mobile.Mobile.Use()
        let page = Div [
                        Id "simplePage"
                        HTML5.Attr.Data "role" "page"
                        HTML5.Attr.Data "url" "#simplePage"
                        ] -< [
                        Div[Text "content"]
                    ]
        Div [page]
        |>! OnAfterRender (fun _ -> JQuery.Of(page.Body)
                                    |> JQuery.Mobile.JQuery.Page
                                    |> ignore

                                    JQuery.Mobile.Mobile.Instance.ChangePage(JQuery.Of(page.Body)))

[<Sealed>]
type MyJQueryMobileEntryPoint() =
    inherit Web.Control()

    [<JavaScript>]
    override this.Body = MyJQueryContent.Main() :> _

module Pages =

    let HomePage =
        PageContent <| fun context ->
            { Page.Default with
                Title = Some "Index"
                Body = [IntelliFactory.Html.Tags.Div[new MyJQueryMobileEntryPoint()]] }

[<Sealed>]
type Website() =
    interface IWebsite<Action> with
        member this.Sitelet = Sitelet.Content "/" Home Pages.HomePage
        member this.Actions = [Home]

type Global() =
    inherit System.Web.HttpApplication()

    member g.Application_Start(sender: obj, args: System.EventArgs) =
        ()

[<assembly: Website(typeof<Website>)>]
do ()

输出：

Answer 1

附带说明一下，当您在添加 OnAfterRender 之前编写 Div [page] 而不是 page 时，您正在创建包含 DIVs 之一，但实际上这不是您的问题。

正如 Omar 所描述的，使用 jQuery Mobile，您需要仔细控制页面结构初始化的时间和方式，尤其是在处理动态页面时。我记得以前看到过你的确切问题，但我在我的邮箱中找不到那个对话，但是，这里有一篇较早的文章，其中有一些有用的信息可用于利用 JQM 页面初始化：

http://fpish.net/blog/JankoA/id/3362/201367-jquery-mobile-page-reuse-with-websharper

Answer 2

当 jQuery Mobile 框架被加载时，它会检查 DOM 中是否存在 page div。如果没有，它会将正文的内容包装在 page div 中。要控制这种行为，您需要阻止 jQM 的 autoInitializePage 以便在您需要时手动初始化 $.mobile.initializePage()。

您需要监听mobileinit 事件来覆盖autoInitializePage。在head 中，代码应放在jQuery（核心）之后和jQuery Mobile 库之前。

/* jQuery.js */
$(document).on("mobileinit", function () {
  $.mobile.autoInitializePage = false;
});
/* jQuery-Mobile.js */

现在您可以随时通过调用$.mobile.initializePage()初始化 jQuery Mobile。

Answer 3

我是 WebSharper 的开发人员。 Omar 是对的，这是 JQM 的事情，另一种解决方法是在 sitelet 中有一个虚拟页面节点。像这样：

module Pages =
    open IntelliFactory.Html

    let HomePage =
        PageContent <| fun context ->
            { Page.Default with
                Title = Some "Index"
                Body = 
                    [
                        Div [HTML5.Data "role" "page"; Id "dummy"]
                        Div [new MyJQueryMobileEntryPoint()]
                    ] }