我正在尝试使用 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 ()