WebSharper JQuery移动页面隐藏

Question

我正在尝试使用F# WebSharper框架建立一个F#移动站点。用WebSharper的说法，我用JQueryMObile控件创建了一个由Sitelet提供的JQueryMObile控件。所有东西都编译并运行，问题在于生成的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。

Main：

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

我是WebSharper的开发人员。Omar是对的，这是一个JQM问题，另一个解决办法是在站点中有一个虚拟页面节点。如下所示：

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()]
                    ] }

Answer 2

另外，在添加DIV之前编写Div [page]而不是page时，您正在创建包含OnAfterRender的OnAfterRender之一，但这确实不是您的问题。

正如奥马尔所描述的，使用jQuery移动时，您需要仔细控制页面结构的初始化时间和方式，特别是在处理动态页面时。我记得之前看到过您的确切问题，但我在电子邮件框中找不到这种对话，然而，这里有一篇前面的文章，其中有一些有用的部分可以用于JQM页面初始化：

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

Answer 3

当加载jQuery移动框架时，它会检查DOM中是否有页面div。如果没有，它会将主体的内容封装在页面div中。要控制这种行为，需要防止jQM的autoInitializePage，以便随时手动初始化$.mobile.initializePage()。

您需要侦听mobileinit事件来重写autoInitializePage。代码应该放在jQuery (核心)之后和head中的jQuery移动库之前。

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

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