handlebars.js 템플릿을 사용하여 배열의 마지막 항목에 조건부

handlebars.js 템플릿을 사용하여 배열의 마지막 항목에 조건부

---

내 템플릿 엔진에 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 엔진을 뜯어 내지 않아도되는 지름길, 다른 접근 방식 및 핸들 바의 장점을 알고 있습니까?

---

Handlebars v1.1.0부터 이제이 문제에 대해 각 도우미에서 @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}}

---

Handlebars 1.1.0 이후 첫 번째와 마지막은 각 도우미의 기본이되었습니다. 티켓 # 483을 참조하십시오 .

사용법은 Eberanov의 도우미 클래스와 같습니다.

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

---

배열의 첫 번째 항목을 처리하려고하면 도움이 될 수 있습니다.

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

@index는 각 도우미가 제공하며 첫 번째 항목의 경우 0과 같으므로 if 도우미에서 처리 할 수 ​​있습니다.

---

해결책:

<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인지 확인합니다.

---

Matt Brennan 에서 도우미를 약간 개선했습니다. 이 도우미를 Objects 또는 Arrays와 함께 사용할 수 있습니다.이 솔루션에는 Underscore 라이브러리가 필요 합니다.

Handlebars.registerHelper("foreach", function(context, options) {
  options = _.clone(options);
  options.data = _.extend({}, options.hash, options.data);

  if (options.inverse && !_.size(context)) {
    return options.inverse(this);
  }

  return _.map(context, function(item, index, list) {
    var intIndex = _.indexOf(_.values(list), item);

    options.data.key = index;
    options.data.index = intIndex;
    options.data.isFirst = intIndex === 0;
    options.data.isLast = intIndex === _.size(list) - 1;

    return options.fn(item, options);
  }).join('');
});

용법:

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

참고URL : https://stackoverflow.com/questions/11479094/conditional-on-last-item-in-array-using-handlebars-js-template