Question

我正在尝试使用F＃WebSharper Framework整合JQuery Mobile网站。在WebSharper的说法中，我使用由Sitelet提供服务的JQueryMObile控件创建了一个Pagelet。一切都编译并运行，问题出在生成的html中。

我声明的页面（simplePage）显然存在于标记中，并使用JQueryMobile css类ui-active进行标记以使其可见。但是，它被一个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 ()

输出：

html output

Answer 1

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

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

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

Answer 2

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

您需要收听mobileinit事件才能覆盖autoInitializePage。代码应放在jQuery（核心）之后和head中的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()]
                    ] }

WebSharper JQuery移动页面隐藏

主

输出：

3 个答案: