使用handlers.js模板以数组中的最后一项为条件

conditional on last item in array using handlebars.js template

本文关键字：一项 条件 最后 js handlers 数组 使用      更新时间：2023-09-26

我正在利用handlers.js作为我的模板引擎，并且希望只有在条件段是templates配置对象中包含的数组中的最后一个项时才显示它。

{
  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}}"

有人知道一条捷径、不同的方法和一些车把的优点吗？这会让我不必费力地使用车把.js引擎来确定最佳路线？

自Handlebars 1.1.0以来，第一个和最后一个已成为每个助手的本机。请参见票据#483。

用法类似于Eberanov的助手类：

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

从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}}

如果您只是尝试处理数组的第一项，这可能有助于

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

@索引由每个助手提供，对于第一个项，它将等于零，因此可以由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的助手中做了一些改进，你可以将这个助手与对象或数组一起使用，这个解决方案需要Undercore库：

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}}

仅供参考：如果你被Handlebars<1.1.0（和我一样）你可能不想尝试这个变通方法：

在正在迭代的对象上定义一个类似isLast的属性，并像一样使用它

{{#each objectsInList}}"{{property}}": "{{value}}"{{#unless isLast}},{{/unless}}{{/each}}

以构建JSON对象。

相关文章：