1

つまり、基本的に、 GitHubのツリースライダーの独自のバージョンを作成しようとしています。関連するJavascript/JQueryコードは次のとおりです。

// handles clicking a link to move through the tree
$('#slider a').click(function() {
    history.pushState({ path: this.path }, '', this.href) // change the URL in the browser using HTML5 history module
    $.get(this.href, function(data) {
        $('#slider').slideTo(data) // handle the page transition, preventing full page reloads
    })
    return false
})

// binds hitting the back button in the browser to prevent full page reloads
$(window).bind('popstate', function() {
    $('#slider').slideTo(location.pathname)
}

わかりました、うまくいけばそれは理解できます。ここで何が起こっているのかについての私の解釈があり、その後に私の問題/問題が続きます：

ツリーをナビゲートするときのGETリクエストのコールバック関数はslideToメソッドであり、HTML文字列がその関数への引数として渡されます。slideToは、JQueryのドキュメントでは見つからないため、スクリプトまたはカスタムライブラリの他の場所で定義されている関数であると想定しています。したがって、私の目的のために、この関数の独自のバージョンを作成しようとしています。ただし、この関数に渡される引数 "data"は、GETリクエストから返されるHTMLの文字列にすぎません。ただし、これはドキュメント内のdivに追加できるHTMLのスニペットだけではありません。これは、同じGETリクエストを実行すると（たとえば、WebブラウザーにURLを入力することによって）、Webページ全体が表示されると予想されるためです。 1つだけではありません。

したがって、私が定義しているこのコールバック関数内で、「data」引数をDOMに解析して、関連するノードを抽出し、アニメーション化された遷移を実行できるようにする必要があります。しかし、これは私には意味がありません。それは一般的に悪い考えのようです。クライアントがDOMの一部にアクセスするためだけにHTMLの文字列全体を解析する必要があることは意味がありません。GitHubは、この方法はページ全体のリロードよりも高速であると主張しています。しかし、私の解釈が正しければ、クライアントは、クリックして（そしてコールバック関数を実行して）ツリーをナビゲートするか、ブラウザーに新しいURLを入力するなどしてページ全体をロードするかどうかにかかわらず、HTMLの完全な文字列を解析する必要があります。そのため、返されたHTML文字列をDOMに解析するか、理想的にはHTMLドキュメントの一部のみをフェッチすることに固執しています。

フェッチしたドキュメントをJavascriptまたはJQueryDOMオブジェクトにロードして、簡単に操作できるようにする方法はありますか？またはさらに良いことに、サーバー側でクレイジーなことをせずに、任意のIDを持つ要素のみをフェッチする方法はありますか（私はすでに試しましたが、スパゲッティコードが多すぎて、保守が困難になりました）？

また、データ引数をJQueryオブジェクトに単純に解析しようとしましたが、これには、JavaScriptメソッドを使用して、Doctype宣言やヘッドタグなどの不要なものをHTMLから取り除く、半分の時間しか機能しないように見えるラウンドアバウトソリューションが含まれていました。

var d = document.createElement('html');
d.innerHTML = data;
body = div.getElementsByTagName("body")[0].innerHTML;

var newDOM = $(body);
// finally I have a JQuery DOM context that I can use,
// but for some reason it doesn't always seem to work quite right

この問題にどのようにアプローチしますか？このコードを自分で書いて自分で動作させようとすると、何をしても、ひどく非効率的でハッキーなことをしているような気がします。

GETリクエストでJQueryDOMオブジェクトを簡単に返す方法はありますか？またはそれ以上に、GETリクエストでフェッチされたドキュメントの一部を返すだけですか？

4

2 に答える 2

2

ラップするだけです。jQueryはそれを解析します。

$(data) // in your callback
于 2013-02-20T21:29:12.383 に答える
1

<p>通常のHTMLWebページでタグを解析したいとします。あなたはおそらく次のようなものを使うでしょう：

var p = $('<p>');

右？したがって、同じアプローチを使用してHTMLドキュメント全体を解析してから、DOMツリーをナビゲートして必要な特定の要素を取得する必要があります。したがって、次のように言う必要があります。

$.get(this.href, function(data) {
    var html = $(data);

    // (...) Navigating through the DOM tree

    $('#slider').slideTo( HTMLportion );
});

XMLドキュメントでも機能することに注意してください。サーバーからXMLドキュメントをAJAX経由でダウンロードし、内部情報を解析してクライアント側に表示する必要がある場合、方法はまったく同じです。

お役に立てば幸いです:)

PS：各JavaScript文の最後にセミコロンを付けることを忘れないでください。おそらく、それらを入れないと、エンジンは機能しますが、安全で常に書く方が良いでしょう！

于 2013-02-20T21:47:06.947 に答える