jquery-mobile - WebSharper JQuery 移动页面隐藏

Question

我正在尝试使用 F# WebSharper Framework 构建一个 JQuery Mobile 站点。用 WebSharper 的说法，我使用 JQueryMObile 控件创建了一个由 Sitelet 提供服务的 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

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

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

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