これはクライアント側のテンプレートへの私の最初の進出であり、それを理解し、正しく使用していることを確認したいと思います。この LinkedIn エンジニアリング ブログを読んだ後、口ひげやハンドルバーではなく、dust.jsを使用することにしました。このスタックオーバーフローの投稿は私の質問の多くに答えていることに注意してください。ただし、明確にしたいことがいくつかあります。
私が働いている環境では、サーバー側には何にもアクセスできないため、作成したものはすべてクライアントのブラウザーで完全に実行できる必要があります。この例では、 LinkedIn Dust チュートリアルからこのコード サンプルを再作成してみます。
テンプレートをオンザフライでコンパイルするので、 dust-core.jsではなく、dust-full.jsをインクルードします。
<script src="js/dust-full.js"></script>
HTMLは次のとおりです。
<script id="entry-template">
{title}
<ul>
{#names}
<li>{name}</li>{~n}
{/names}
</ul>
</script>
<div id="output"></div>
そして JavaScript (jQuery を使用):
$(document).ready(function () {
var data = {
"title": "Famous People",
"names" : [{ "name": "Larry" },{ "name": "Curly" },{ "name": "Moe" }]
}
var source = $("#entry-template").html();
var compiled = dust.compile(source, "intro");
dust.loadSource(compiled);
dust.render("intro", data, function(err, out) {
$("#output").html(out);
});
});
このjsfiddleでわかるように、これはうまくいくようです。
いくつかの質問:
テンプレートを script タグ内に含める必要があるのはなぜですか? この変更された fiddleのように、id="entry-template" を使用して div に含めて、dust.render() 中にその内部の html を置き換えないのはなぜですか?
" Dust.loadSource(compiled); " は何をしますか? ドキュメントには、「ロードするJSのスクリプトブロックの一部として「コンパイル済み」文字列を含めると、「イントロ」テンプレートが定義および登録されます。すぐに実行したい場合は、それを呼び出してください。しかし、私はそれが何を意味するのか理解していません。ただし、その行を削除すると機能しないことに気付いたので、理解したいと思います。
テンプレートに満足して完成させた後、ページが読み込まれるたびにブラウザでコンパイルするのではなく、軽量のdust-core.jsをインポートするようにコンパイルするにはどうすればよいですか? これを行うことには大きな利点がありますか、それとも Dust-full.js のままにしておくべきですか?
より一般的には、これはダスト（またはその問題のテンプレートフレームワーク）を実装するための適切で便利な方法のように見えますか、それとも私はどこかから離れていますか?
前もって感謝します。