0

私は、dust.js のような JavaScript テンプレート ライブラリや、canJS のような他のより広範なライブラリを調べてきました。

私が働いている場所では、クライアント側のアプリケーション/サイトのほぼ 99% を処理しています。現在、私はhtmlの文字列を構築し、domに注入し、クリック/アクションをリッスンし、ajaxを実行し、結果からhtmlの文字列をさらに構築し、domに注入するなどしています。

この簡単な例を挙げると。

//stringbuilder
function StringBuilder(e){this.strings=new Array("");this.append(e)}StringBuilder.prototype.append=function(e){if(e){this.strings.push(e)}};StringBuilder.prototype.clear=function(){this.strings.length=1};StringBuilder.prototype.toString=function(){return this.strings.join("")}

var data = {
    fname: "Joe",
    lname: "Doe",
    occupation: "Developer",
    things: ["some", "list", "of", "things"]
}

var sb = new StringBuilder();

sb.append("<h1>" + data.fname + " " + data.lname + "</h1>");
sb.append("<p>Occupation: " + data.occupation + "</p>");
sb.append("<h3>A list of things</h3>");
sb.append("<ul>");
for (var i = 0; i < data.things.length; i++) {
    sb.append("<li>" + data.things[i] + "</li>");
}
sb.append("</ul>");

$("#output").html(sb.toString());

これは、テンプレート化によってどのように改善できますか? 私が見てきたことから、上記よりも読みやすく、保守しにくい特定のテンプレート構文に適応する必要があります。複雑なレイアウト、または再帰があるシナリオ (何レベルになるかわからないリスト内のリスト) についてはどうですか。場合によっては、テンプレートの構文/エンジンが制限要因になると感じています。

そのhtmlをJSから完全に引き出すのはいいことだと思いますが、HTML内のテンプレート構文でスクリプトタグを使用することは考えられません。特に、テンプレートを外部ファイルとして使用したくないため、追加のリクエストを実行する必要があります読んだ。

私を教育してください！

4

3 に答える 3

6

まあ、比較してください：

sb.append("<h1>" + data.fname + " " + data.lname + "</h1>");
sb.append("<p>Occupation: " + data.occupation + "</p>");
sb.append("<h3>A list of things</h3>");
sb.append("<ul>");
for (var i = 0; i < data.things.length; i++) {
    sb.append("<li>" + data.things[i] + "</li>");
}
sb.append("</ul>");

に

<h1>@fname @lname</h1>
<p>Occupation: @occupation</p>
<h3>A list of things</h3>
<ul>
    @foreach( thing in things ) {
        <li>@thing</li>
    }
</ul>

どちらがメンテナンスしやすいですか?

デモ

于 2012-12-18T00:20:20.503 に答える
1

dust.jsを使用すると、次のようなテンプレートファイルを作成できます。

<h1>{fname} {lname}</h1>
<p>Occupation: {occupation}</p>
<h3>Friends list:</h3>
<ul>
  {#friends}
  <li>{name} {age}</li>
  {/friends}
</ul>

JSONデータ：

var data = {
  fname: "Joe",
  lname: "Doe",
  occupation: "Developer",
  friends: [
    {
      name: "Moe",
      age: 37 
    },
    { 
      name: "Larry",
      age: 39
    },
    {
      name: "Curly",
      age: 35
    }
  ]
}

テンプレートをレンダリングするには、dust.renderを呼び出し、JSONオブジェクトとコールバック関数とともにtemplate_nameを渡します。

dust.render('template_name', data, function(err, out){
  $("#output").html(out);
});

もう1つの有用で関連する質問：クライアント側のテンプレートとしてdustjs-linkedinを使用する方法は？

于 2012-12-18T08:58:34.210 に答える
0

Mustache.jsのこのテンプレート:

sb.append("<h1>" + data.fname + " " + data.lname + "</h1>");
sb.append("<p>Occupation: " + data.occupation + "</p>");
sb.append("<h3>A list of things</h3>");
sb.append("<ul>");
for (var i = 0; i < data.things.length; i++) {
    sb.append("<li>" + data.things[i] + "</li>");
}
sb.append("</ul>");

DOM に移動され、IDE では次のようになります。

<script id="sb">
    <h1>{{fname}} {{lname}}</h1>
    <p>Occupation: {{occupation}}</p>
    <h3>A list of things</h3>
    <ul>
    {{#things}}
        <li>{{.}}</li>
    {{/things}}
    </ul>

</script>

"<div>"IDE でコードの強調表示が維持され、 sなしで読みやすくなります。

これをレンダリングするには、次を使用します。

var output = Mustache.render($("sb").html(), data);
$("#destination").html(output);
于 2012-12-18T00:23:36.637 に答える