2

私は小さな自作プロジェクトに取り組んでいますが、 RoR 、より具体的には RoR を扱うことで甘やかされてきたことがわかりましたpartials。

私のプロジェクトは完全にクライアント側です。だから私はjavascriptとHTML5を使用しています。今私がやりたいことはこれです: <%= yeild %>RoR で古典的なタグが行うようなことを行うことができるコンテナーを含むホーム画面テンプレートを用意します。

使おうと思っiframesたけど面倒くさい。また、 xmlHTTP リクエストinnerHTMLを使用して JavaScript でファイルを取得し、コンテンツdivをファイル ストリームで更新することも考えました。以前に個人的なプロジェクトでこれを行ったことがありますが、ハックであり、Chrome などのブラウザーに--allow-file-access-from-filesタグを付けてフラグを立てる必要があります。明らかに、エンドユーザーにアドバイスすることはできません。

私のもう1つの考えは、htmlをjavascript文字列として記述し、別の文字列を値として配置することでしcontent.innerHTMLたが、これは維持するのがばかげて難しく、まったくきれいではないように思えます。

最終的に、私は自分の解決策を書くことさえできます（それから、他の誰かが見ているための答えとしてここに投稿します）が、そこにすでに解決策があるかどうか知りたかったのです.

最終的な最終目標の動作は、次のフローに従います。

メインページ：

<div id="main_content">
    <!-- this is the yield area -->
</div>

アプリが起動し、ファイルmenu.htmlが次の場所にロードされyield areaます。

<div id="main_content">
    <!-- this is the content of menu.html, notice it's like a partial, 
         there is no body or head or doc type tags, just a list -->
    <ul>
        <li>Menu item</li>
    </ul>
    <!-- this is the end of the menu.html content -->
</div>

最後にクリックするMenu itemと、 のコンテンツが にロードmenu_item.htmlされcontent div、現在のコンテンツが置き換えられます ( menu.html)。

私がすでに行ったいくつかの研究：

4

2 に答える 2

0

の安全性が心配な場合<div>(心配するのは良いことです)、<div>DOM に接続されていない仲介者を使用することをお勧めします。

function parse_html (html) {
    var div = document.createElement("div");
    div.innerHTML = html;

    var scripts = div.getElementsByTagName("script"),
        i = scripts.length;

    while (i > 0) {
        div.removeElement(scripts[i]);
        i -= 1;
    }

    return div.firstChild;
}

次に、XHR 経由で HTML ファイルを取得した場合:

var xhr = new XMLHttpRequest();
xhr.open("GET", "/templates/menu.html", true);

var child_el = parse_html(xhr.responseText);XHR コールバックに入れることができます。
次に、その要素を div に追加します。

この関数は、パーシャルに 1 つのルート要素があることを前提としています (連続する複数のパーシャルを使用できるが、各テンプレートは 1 つの要素から始まると想定しています)。

そうでない場合は、関数 ( ) でドキュメント フラグメントを作成し、document.createDocumentFragment();各要素を順番にフラグメントに追加し、関数の最後にフラグメントを返し、それを div に追加します。 (もちろん、これにより div 内のノードの管理が非常に難しくなります)。

私はいくつかのペット プロジェクトに対してこれと同様のことを行っており、{% %}データ プロパティ ( {% item.title %}) または関数からの任意の JS/戻り値を html 内に挿入するために構築された単純なテンプレート システムを使用しています。

これは基本的な実装にすぎず、これでできることはたくさんあります...
テンプレート内のテンプレートに対して、任意のネスト レベルをサポートするには、さらに多くの作業が必要になります。

于 2013-03-26T22:50:04.113 に答える
0

jQuery を使用している場合は、jQuery.load() を使用できます: http://api.jquery.com/load/

例：

$("#main_content").load("menu_item.html");
于 2013-03-26T21:17:17.963 に答える