0

主な質問は一番下に太字で示されていますが、質問の内容と理由について説明します。

基本的に、私が現在ユーザーのために行っていることを一度に 1 つずつ取り入れ、すべてを 1 ページに表示するオプションをユーザーに提供しようとしています。PHP を使用してデータを html に配置していましたが、自分のコードを改善することに興味があり、javascript を使用した handlebars.js がより理にかなっているのかどうか疑問に思っていました。

ユーザーがそれぞれの隣にチェックボックスがあるリストを持っているとします

[x] Option 1
[ ] Option 2
[ ] Option 3
...
[x] Option 20

チェックボックスごとに、データベースからの情報を含む html のブロックが表示されます。

現在、ページごとに 1 ブロックの html のみを表示しています。PHP は同じページにあり、データを取得し、2 つのクエリから生成された 2 つの配列をループして、html 内のインライン php を使用して、html の現在のブロックを生成します。

....
<div class="option-wrapper">
    <?php foreach ( $option_list as $option ) : ?>
....

この同じコード ブロックを同じページで 1 ～ 20 回生成できるようにする必要があります。インラインでphpを使用して、htmlのブロック全体をループして、選択したオプションごとに別のhtmlのブロックを作成できると思います。

|    Option 1      |  |    Option 20     |
|  Title: Test1    |  |  Title: Test2    |

しかし、この目的で JavaScript テンプレート エンジンを使用する利点があるかどうか疑問に思っていました。私はチャートデータにjavascriptを書きました。現在、php変数（2つの配列から15個）を格納する非表示のhtml要素があり、jQueryによってプルされます。しかし、html で変数を非表示にすることは、少なくとも悪い習慣のように感じます。

<div id="total-users" style="display:none;"><?php echo $total_users ?></div>
....
var totalUsers = $('#total-users').html();

これはそれらの 1 つかもしれません。質問する必要がある場合、これはおそらく悪い習慣のタイプの質問です。しかし、正直なところ、これは悪い習慣でしょうか?

より高品質のコードを書くためには、php がすべてのデータを取得した後で json_encode を使用する方がよいでしょうか。次に、選択されたオプションごとに複製された html のブロックで handlebars.js のような JavaScript テンプレート エンジンを使用するには?

もう1つ、将来、各ブロックのドロップダウンを使用してオンザフライで表示されるデータを切り替えたいと思うかもしれませんが、これにより、どのルートがより理にかなっているのですか?

私が行方不明であるか、間違っていることが明らかなことは他にありますか?

ありがとうございました！

4

2 に答える 2

2

データにテンプレートを使用することを強くお勧めします。

1- ユーザーがオプションを選択する (または利用可能なすべてのオプションから最終的な選択肢を送信する) ときに、AJAX 呼び出しを行って JSON オブジェクトを取得します (1 つの JSON 呼び出しで 1 つのオブジェクトまたはすべてのオプション データを返すことができますが、後者が推奨されます)。

2- テンプレート (ハンドルバー、口ひげ、アンダースコアなど) を使用して、成功のコールバック関数でデータをレンダリングします。

これにより、コードがより効率的になり、将来の UI 要求に対してより柔軟になります (コードは、ユーザー エクスペリエンスの観点から多くの異なる実装をサポートします)。

于 2012-07-31T18:46:32.343 に答える
1

私の理解が正しければ、データベースから取得している情報は静的です (つまり、チェックボックスをクリックするたびに変化しません)。

上記が本当なら、私は個人的にこのようにします。（あくまで私見ですが）

サーバー側 (PHP) で、データベース (すべての「チェックボックス」を参照) からすべての情報を 1 回だけ取得します。次に、それらを非表示の div に配置します。

<div id="stuffFromDb1" class="hidden" style="display: none">blablabla</div>

次に、ユーザーがチェックボックスをクリックすると、display: none を display: ブロックに変更して、対応する div を表示します。(jQuery を使用すると、さらに簡単になります。 Toggleを参照してください。

これは、AJAX または複数の「フォーム」を介して情報を取得する代わりに、最も効率的な方法のように思えます。

編集：

サーバーへのリクエスト数が減るため、AJAX やフォーム ポストよりもこの方法を好みます。DB クエリが非常に CPU を集中的に使用する (複雑な) 場合を除き、通常、データベースに対して複数回クエリを実行するよりも 1 回実行する方が高速であり、ユーザー エクスペリエンスが向上します。

編集2:

コードを見ずに答えを出すのは難しいですが、100 または 200 または 1000 の場合でも、1 つずつロードするよりも、一度にすべてをロードする方が全体的に高速になると思います。データベースへのクエリ。

クライアント側のテンプレート システムは、常にクライアントの速度に依存しています。新しいブラウザー/新しい PC では JS エンジンはかなり高速ですが、古い PC/古いブラウザーではまったくそうではありません。複雑な DOM 操作 + AJAX 要求を完了するのに必要な時間は、ユーザーがページを操作できないほど時間がかかる場合があります。さらに、他の問題が発生する可能性があります (AJAX 競合状態が頭に浮かびます)。

于 2012-07-31T18:47:55.747 に答える