3

F# WebSharper Framework を使用して JQuery Mobile サイトを作成しようとしています。WebSharper の用語では、Sitelet によって提供される JQueryMObile コントロールを使用してページレットを作成しました。すべてがコンパイルされて実行されますが、問題は生成される html にあります。

私が宣言したページ (simplePage) は明らかにマークアップに存在し、それを表示するために JQueryMobile css クラスでマークされui-activeています。ただし、ページでもあるがアクティブな css クラスでマークされていない div で囲まれているため、非表示になっています。したがって、この div 内の私のページは非表示になっています。これを含むページ div を作成していません。HTMLヘッドにJQueryMobileスクリプトをロードすることの副作用のようです。どうすればそれを取り除くことができますか?

http://websharper.com/samples/JQueryMobileから例を取り上げました。私は WebSharper バージョン 2.5.125.62 と WebSharper.JQueryMobile バージョン 2.5.4.198 を使用しています。関連するコード ファイルが 1 つあり、その後に生成された 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書き込み時に を含む の1 つを作成していますが、実際にはこれは問題ではありません。Div [page]pageOnAfterRender

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でラップします。この動作を制御するには、いつでも手動で初期化autoInitializePageできるように jQM を防止する必要があります。$.mobile.initializePage()

mobileinitオーバーライドするには、イベントをリッスンする必要がありますautoInitializePage。コードは、jQuery (コア) の後、jQuery Mobile ライブラリの前に配置する必要があります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 の問題です。もう 1 つの回避策は、サイトレットにダミー ページ ノードを配置することです。このような：

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 に答える