3

我正在尝试使用 F# WebSharper Framework 组合一个 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 ()

输出：

html输出

4

3 回答 3

3

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

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

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

于 2014-09-30T11:50:02.987 回答
2

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

您需要收听mobileinit要覆盖的事件autoInitializePage。代码应放在 jQuery（核心）之后和head.

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

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

于 2014-09-29T22:44:38.653 回答
1

我是 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()]
                    ] }
于 2014-09-30T11:59:46.293 回答