0

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

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

{
    "people": [
        {
            "name": "Jerry",
            "age": "17"
        },
        {
            "name": "Darcy",
            "age": "19"
        },
        {
            "name": "Jacob",
            "age": "25"
        },
        ... and so on for 100 or so people
    ]
}

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

<div class="row">
    <div>{name} - {age}</div>
    <div>{name} - {age}</div>
    <div>{name} - {age}</div>
</div>

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

(function(){dust.register("template.tl",body_0);function body_0(chk,ctx){return chk.write("<div class=\"row\"><div>").reference(ctx.get(["name"], false),ctx,"h").write(" - ").reference(ctx.get(["age"], false),ctx,"h").write("</div><div>").reference(ctx.get(["name"], false),ctx,"h").write(" - ").reference(ctx.get(["age"], false),ctx,"h").write("</div><div>").reference(ctx.get(["name"], false),ctx,"h").write(" - ").reference(ctx.get(["age"], false),ctx,"h").write("</div></div>");}return body_0;})();

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

<html>
    <head>
    ...
    </head>

    <body>
        <div id="people"></div>

        <button id="load-more" type="button">Load More</button>
    </body>

    <script src="js/dust-core.min.js"></script>
    <script src="js/template.js"></script>
</html>

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

4

1 に答える 1

1

template.tlを次のように変更します。

<div class="row">
    {#.}
        <div>{.name} - {.age}</div>
    {/.}
</div>

テンプレートを変更すると、次の 2 つの利点があります。

  • people3 つだけでなく、任意の数のオブジェクトを渡すことができます。
  • 配列に 2 つの要素しか残っていない場合でも、正しくレンダリングされます。

レンダリングを実行する JavaScript:

$('#load-more').on('click', function(){
    var next3 = data.people.splice(0, 3);

    if(next3.length == 0){
        return; // Array is empty
    }

    dust.render('template.tl', next3, function(err, str){
        if(str){
            $('#people').append(str);
        }
    });
});

最も重要な部分はdata.people.splice(0, 3)、これにより配列から 3 つの要素が削除され、それらが返されることです。 Array.prototype.splice()を参照してください。

コードの残りの部分は、イベント リスナーを追加し、レンダリングされたテンプレートを挿入する JQuery だけです。

JSFiddle

于 2014-05-15T17:41:20.730 に答える