0

ユーザーがボタンをクリックするたびに新しい一意の div を作成できるページがあるとします。div のコンテンツは、ほとんどがサーバー側の共通の単一のテンプレートに基づいていますが、ユーザーはこれらのテンプレートをいくつか作成できるため、結果の div のコンテンツ DOM ID をリクエストごとに動的に生成する必要があります。後で jQuery を介して個々の div とそのコンテンツを個別に選択します (そうしないと、これらの div は同じテンプレートに基づいているため、必然的に常に同じ DOM ID を持つことになり、jQuery を使用して個別に選択することができなくなります)

javascript と jquery を使用して Windows システムを構築しているとします。サーバー側には、「フォルダー」ウィンドウを表す 1 つのテンプレートがあります。このテンプレートには独自のボタン、メニューなどがあり、それらはすべて ID を持つ dom 要素です。

ユーザーはページ上で複数の「フォルダ」ウィンドウを開くことができると想定されており、作成時にそれぞれに異なる ID が割り当てられますが、ロードされたテンプレートはすべて同じであるため、内容は同じです。これらのウィンドウ。つまり、ユーザーが 3 つの「フォルダー」ウィンドウを開くと、ページに読み込まれる実際のマークアップは次のようになります。

<div id="firstWindow">
    <div id="windowContainer">
        <div id="windowHead">
            stuff
        </div>
        <div id="windowBody">
            <div id="windowInfoButton">stuff</div>
            stuff
        </div>
    </div>
</div>
<div id="secondWindow">
    <div id="windowContainer">
        <div id="windowHead">
            stuff
        </div>
        <div id="windowBody">
            <div id="windowInfoButton">stuff</div>
            stuff
        </div>
    </div>
</div>
<div id="thirdWindow">
    <div id="windowContainer">
        <div id="windowHead">
            stuff
        </div>
        <div id="windowBody">
            <div id="windowInfoButton">stuff</div>
            stuff
        </div>
    </div>
</div>

ご覧のとおり、windowContainer、windowHead などは同じテンプレートから読み取った結果、複製されています。これ自体はすでに悪いことですが、さらに、firstWindow でそれらを操作しても secondWindow に影響を与えないように、jQuery を使用して各 windowContainer または windowHead を選択できるようにする必要があるため、単にすべての ID をクラスに切り替えるだけではできません。

これを解決するために私が考えることができる2つのアプローチがあります：

1) PHP をテンプレート言語として直接使用しているので、randomid または string を生成するコードを簡単に添付して、すべての DOM を次のように置き換えることができます。

<div id="someFixedID" class="someClass">stuff</div>

これに：

<div id="<?=$someRandomStuff?>someFixedID" class="someClass">stuff</div>

問題は、テンプレートに 20 個または 30 個の DOM 要素が含まれていると、テンプレートが大幅に汚染されることです。テンプレートのコードをできるだけ少なくして、デザインをすばやく反復できるようにしています。

2) jQuery を使用すると、ajax を介してテンプレートをロードし、div 内のすべての要素をループして、表示する前にその場で ID を変更することができます。これはテンプレートをきれいに保つのに役立ちますが、このメソッドは 20 または 30 の要素をループする必要があるため、クライアント側に不要なオーバーヘッドが追加されるのではないかと心配しています。

保守性とパフォーマンスの点で、どちらの方法がより理にかなっていますか? 私が考えもしなかったこれにアプローチする別の方法はありますか？

4

2 に答える 2

1

Ajax 呼び出しの URL にパラメーターを追加して、クライアント側で生成されたキーを使用するテンプレートを取得できます。

非常に大まかな (安全ではない) ドラフト:

サーバー上 (template.php):

<div id='<?= $_GET["container_key"] ?>' class='main-container'>
  ....
</div>

あなたの ajax 呼び出し:

var containerKey = Math.random();
$.ajax("/template.php?container_key=" + containerKey, ....)

Math.random()衝突を防ぐために、(タイムスタンプ、GUID など)よりも優れたものを使用してください。

于 2012-05-05T02:09:20.240 に答える