83

テンプレート エンジンに handlebars.js を利用しており、テンプレート構成オブジェクトに含まれる配列の最後の項目である場合にのみ、条件付きセグメントを表示しようとしています。

{
  columns: [{<obj>},{<obj>},{<obj>},{<obj>},{<obj>}]
}

私はすでにいくつかの等値/大/小比較を行うヘルパーを取り込んでおり、この方法で最初の項目を特定することに成功しましたが、ターゲット配列の長さにアクセスできませんでした。

Handlebars.registerHelper('compare', function(lvalue, rvalue, options) {...})

"{{#each_with_index columns}}"+
"<div class='{{#equal index 0}} first{{/equal}}{{#equal index ../columns.length()}} last{{/equal}}'>"+
"</div>"+
"{{/each_with_index}}"

最適なコースを決定するために handlebars.js エンジンを引き裂く必要がないようにするショートカット、別のアプローチ、およびいくつかのハンドルバーの良さを知っている人はいますか?

4

6 に答える 6

164

Handlebars 1.1.0 以降、first と last は each ヘルパーにネイティブになりました。チケット#483を参照してください。

使用法は、Eberanov のヘルパー クラスのようなものです。

{{#each foo}}
    <div class='{{#if @first}}first{{/if}}{{#if @last}} last{{/if}}'>{{@key}} - {{@index}}</div>
{{/each}}
于 2013-11-05T08:56:09.797 に答える
119

Handlebars v1.1.0 の時点で、この問題に対して each ヘルパーで@firstおよびブール値を使用できるようになりました。@last

{{#each foo}}
    <div class='{{#if @first}}first{{/if}}
                {{#if @last}} last{{/if}}'>
      {{@key}} - {{@index}}
    </div>
{{/each}}

トリックを行うために私が書いたクイックヘルパーは次のとおりです。

Handlebars.registerHelper("foreach",function(arr,options) {
    if(options.inverse && !arr.length)
        return options.inverse(this);

    return arr.map(function(item,index) {
        item.$index = index;
        item.$first = index === 0;
        item.$last  = index === arr.length-1;
        return options.fn(item);
    }).join('');
});

次に、次のように記述できます。

{{#foreach foo}}
    <div class='{{#if $first}} first{{/if}}{{#if $last}} last{{/if}}'></div>
{{/foreach}}
于 2012-08-17T08:23:37.463 に答える
26

配列の最初の項目を処理しようとすると、これが役立つ場合があります

{{#each data-source}}{{#if @index}},{{/if}}"{{this}}"{{/each}}

@index は each ヘルパーによって提供され、最初の項目ではゼロに等しいため、if ヘルパーによって処理できます。

于 2013-02-19T01:58:24.693 に答える
1

解決：

<div class='{{#compare index 1}} first{{/compare}}{{#compare index total}} last{{/compare}}'></div>

次のブログと要点のヘルパーを活用します...

https://gist.github.com/2889952

http://doginthehat.com.au/2012/02/comparison-block-helper-for-handlebars-templates/

// {{#each_with_index records}}
//  <li class="legend_item{{index}}"><span></span>{{Name}}</li>
// {{/each_with_index}}

Handlebars.registerHelper("each_with_index", function(array, fn) {
  var total = array.length;
  var buffer = "";

  //Better performance: http://jsperf.com/for-vs-foreach/2
  for (var i = 0, j = total; i < j; i++) {
    var item = array[i];

    // stick an index property onto the item, starting with 1, may make configurable later
    item.index = i+1;
    item.total = total;
    // show the inside of the block
    buffer += fn(item);
  }

  // return the finished buffer
  return buffer;

});

Handlebars.registerHelper('compare', function(lvalue, rvalue, options) {

    if (arguments.length < 3)
        throw new Error("Handlerbars Helper 'compare' needs 2 parameters");

    operator = options.hash.operator || "==";

    var operators = {
        '==':       function(l,r) { return l == r; },
        '===':      function(l,r) { return l === r; },
        '!=':       function(l,r) { return l != r; },
        '<':        function(l,r) { return l < r; },
        '>':        function(l,r) { return l > r; },
        '<=':       function(l,r) { return l <= r; },
        '>=':       function(l,r) { return l >= r; },
        'typeof':   function(l,r) { return typeof l == r; }
    }

    if (!operators[operator])
        throw new Error("Handlerbars Helper 'compare' doesn't know the operator "+operator);

    var result = operators[operator](lvalue,rvalue);

    if( result ) {
        return options.fn(this);
    } else {
        return options.inverse(this);
    }

});

開始インデックスが正しく 1 であることに注意してください。

于 2012-07-16T02:09:18.363 に答える