web-dev-qa-db-ja.com

handlebars.jsでそれぞれの結果を制限する

ツイートを表示する小さなプラグインを作成しました。以下は、ツイートをループして表示するコードです。

    <script id="tweets-template" type="text/x-handlebars-template" >
        {{#each this}}
        <li>
        <p>{{Tweet}}</p>
            <span id="author">{{author}}<span/>
        </li>
        {{/each}}
    </script>

しかし、私がやりたいのは、ツイートの数を5または10に制限することです。しかし、ループは利用可能なすべてのツイートをリストしています。 forループのようにツイートを制限するにはどうすればよいですか。お気に入り

    for(i=0;i<5;i++){display the tweets}
jqueryhtmlhandlebars.js
26
Subash

2つの選択肢があると思います。

  1. コレクションをハンドルバーに渡す前に、コレクションのサイズを制限してください。
  2. 制限を指定できる独自のブロックヘルパーを作成します。

実際の each実装 は非常に単純なので、上限を含めるように適応させるのはかなり簡単です。

// Warning: untested code
Handlebars.registerHelper('each_upto', function(ary, max, options) {
    if(!ary || ary.length == 0)
        return options.inverse(this);

    var result = [ ];
    for(var i = 0; i < max && i < ary.length; ++i)
        result.Push(options.fn(ary[i]));
    return result.join('');
});

次に、テンプレートで：

<script id="tweets-template" type="text/x-handlebars-template" >
    {{#each_upto this 5}}
        <li>
            <p>{{Tweet}}</p>
            <span id="author">{{author}}<span/>
        </li>
    {{/each_upto}}
</script>
38
mu is too short

Dtipson が言うように、eachを複製することは現在良い考えではないことに同意します。

limitヘルパーを使用した彼の提案したアプローチは、実際にIMOの最良の方法です。これを実装するために必要なコードは、次のとおりです。

// limit an array to a maximum of elements (from the start)
Handlebars.registerHelper('limit', function (arr, limit) {
  if (!Array.isArray(arr)) { return []; }
  return arr.slice(0, limit);
});

そして、テンプレートで（配列がcart.productsであると仮定）：

{{#each (limit cart.products 5)}}
  <li>Index is {{@index}} - element is {{this}}</li>
{{/each}}

もちろん、これを機能させるには、部分式をサポートする最新のハンドルバーバージョンが必要です。

20
talkol

「それぞれ」はもはやそれほど単純ではありません： https://github.com/wycats/handlebars.js/blob/master/lib/handlebars/base.js#L99

これは、それぞれが、おそらく引き続きアクセスしたいループ情報のホスト全体をサポートするようになったためです。

したがって、はるかに複雑なデータをそれぞれ再実装したくない場合は、データを早い段階で制限することをお勧めします。最新バージョンのハンドルバーを使用している場合は、それぞれの中で部分式を使用することもできます（つまり、{{＃each（limit data 6）}}。

4
Dtipson

私の編集が拒否されたので muが短すぎます

この編集は、投稿の作成者に対応することを目的としており、編集としては意味がありません。コメントまたは回答として書かれている必要があります。

彼は、自分で修正するのではなく、答えを出すことを提案しています。

Handlebars.registerHelper('each_upto', function(ary, max, options) {
    if(!ary || ary.length == 0)
        return options.inverse(this);

    var result = [ ];
    for(var i = 0; i <= max && i < ary.length; ++i)
        result.Push(options.fn(ary[i]));
    return result.join('');
});

これにより、指定された正しい金額になります。

使用法：

<script id="tweets-template" type="text/x-handlebars-template" >
    {{#each_upto this 5}}
        <li>
            <p>{{Tweet}}</p>
            <span id="author">{{author}}<span/>
        </li>
    {{/each_upto}}
</script>
0
SeaWorld