問題タブ [client-side-templating]

これはクライアント側のテンプレートへの私の最初の進出であり、それを理解し、正しく使用していることを確認したいと思います。この LinkedIn エンジニアリング ブログを読んだ後、口ひげやハンドルバーではなく、dust.jsを使用することにしました。このスタックオーバーフローの投稿は私の質問の多くに答えていることに注意してください。ただし、明確にしたいことがいくつかあります。

私が働いている環境では、サーバー側には何にもアクセスできないため、作成したものはすべてクライアントのブラウザーで完全に実行できる必要があります。この例では、 LinkedIn Dust チュートリアルからこのコード サンプルを再作成してみます。

テンプレートをオンザフライでコンパイルするので、 dust-core.jsではなく、dust-full.jsをインクルードします。

HTMLは次のとおりです。

そして JavaScript (jQuery を使用):

このjsfiddleでわかるように、これはうまくいくようです。

いくつかの質問:

1. テンプレートを script タグ内に含める必要があるのはなぜですか? この変更された fiddleのように、id="entry-template" を使用して div に含めて、dust.render() 中にその内部の html を置き換えないのはなぜですか?

2. " Dust.loadSource(compiled); " は何をしますか? ドキュメントには、「ロードするJSのスクリプトブロックの一部として「コンパイル済み」文字列を含めると、「イントロ」テンプレートが定義および登録されます。すぐに実行したい場合は、それを呼び出してください。しかし、私はそれが何を意味するのか理解していません。ただし、その行を削除すると機能しないことに気付いたので、理解したいと思います。

3. テンプレートに満足して完成させた後、ページが読み込まれるたびにブラウザでコンパイルするのではなく、軽量のdust-core.jsをインポートするようにコンパイルするにはどうすればよいですか? これを行うことには大きな利点がありますか、それとも Dust-full.js のままにしておくべきですか?

4. より一般的には、これはダスト（またはその問題のテンプレートフレームワーク）を実装するための適切で便利な方法のように見えますか、それとも私はどこかから離れていますか?

前もって感謝します。

これは、次のjsfiddleで遊ぶことができます。次の JSON データがあるとします。

Dust.jsを使用してすべての人の名前を出力したい場合は、次のようにテンプレートを設定します。

ただし、次の場合はどうでしょう。

1) 「緑」の目を持つ人々の名前だけを出力したかったのですか? ほこりの条件を使用してそれを行う方法はありますか?

2) 目の色に関係なく、最初の 2 つの名前だけを出力したかった

3) 目の色に関係なく、2 人目の名前だけを出力したかった

編集: 4 番目と 5 番目のシナリオの追加:

4) 2 番目と 3 番目の名前のみを表示したい (つまり、インデックスXからインデックスY )

5) 緑色の目を持つ人々の最初の 2 つの名前のみを出力したい (表示されない緑色の目を持つ人々を含め、人々のリストが上記の 3 つよりもはるかに長いとします)。

そしてもう1つの質問：

JSON に次のようなキーと値のペアがあるとします。

たとえば、{@eq} を使用して「tag2」が含まれているかどうかを確認する方法はありますか?

私は Underscore テンプレートを使用しており、HTML エスケープ機能を活用しながら、一部のタグを通過させたいと考えています。

しかし、それらの実装を見てみると、これは全か無かの状況のようです。エスケープをオンにすると、すべての HTML エンティティがエスケープされます。<p>たとえば、 sayや<strong>などの「安全な」タグを除いて、すべてをエスケープすることはできません。

この制限を回避する最善の方法は、アンダースコアの_.escape()and_.unescape()をオーバーライドすることのようですが、それは実際にはひどい考えのようで、私がやりたいことではありません。別のテンプレート エンジンを使用することになるとしても、もっと簡単で直接的な方法があるはずです。

私は非常に基本的な剣道グリッドを持っています。テンプレート機能を使用してセル データのスタイルを設定しています。私がやりたいのは、「編集」を赤で、「削除」を緑でスタイルすることです。

系統コード

どうすればできますか。細胞データを分離できません。

JSFiddle - http://jsfiddle.net/Sbb5Z/1338/

そこで、 John Resig のテンプレート エンジンを使用することを目指しています。

「テンプレート」を含む変数を関数に渡す必要があります。ただし、問題は、次のようなものを渡す必要があることです。

壊れているように見えるのは次のとおりです。

このコードが正規表現を介して渡されると、失敗します。上記のコードのいずれかを渡すことができ、壊れないようにすることが重要です。何か案は？

毎回最初から繰り返すのではなく、参照しているデータ ファイルを進めながら、ダスト テンプレートを繰り返しレンダリングする最善の方法は何でしょうか。例えば：

dataという変数に JSON として保存されている 100 人以上の人のリストがあるとします。

そして、3 つの名前/年齢の行をエクスポートするこのtemplate.tlファイルがあります。

私はtemplate.jsにプリコンパイルします:

次に、次のようなindex.htmlファイルがあります。

ボタンがクリックされるたびに 3 人の行が 内に追加され、<div id="people"></div>その後の各クリックで次の 3 人がロードされ、データ配列の最後がテストされるようにするための最良の方法は何でしょうか (私のニーズでは、人数は常に 3 の倍数です)。

アンダースコア テンプレートの代わりに BackboneJS でハンドルバー テンプレートを使用している人を多く見てきましたが、アンダースコアでも BackboneJS に大きく依存しています。そうすることのメリットを誰か教えてください。

PHP バックエンドと JavaScript / AJAX リクエストの間でテンプレート情報を共有するにはどうすればよいですか?

昔、私は AJAX リクエストを送信したばかりで、サーバーによって HTML が生成され、そのまま送信されました。今日、私は AJAX データを JSON として持っていますが、冗長なレイアウト コードを作成せずにサーバー側とクライアント側 (更新、フィルタリングなど) で同じテンプレート (ユーザー リストなど) を使用する方法がわかりません。

PHP/LaravelおよびJavaScript 用のパーサーを備えたテンプレート言語はありますか?

Laravel テンプレート エンジンの Blade は、明らかに JavaScript では使用できません。Google で見つけた唯一の共有テンプレート言語は Mustache でしたが、Laravel のパーサーは時代遅れでした。

他に何かありますか?そのためにどのアプローチを使用しますか?