使用 handlebars.js 模板以数组中的最后一项为条件 [英] conditional on last item in array using handlebars.js template

问题描述

我正在将 handlebars.js 用于我的模板引擎，并且希望仅当它是模板配置对象中包含的数组中的最后一项时才显示条件段.

<代码>{列:[{<obj>},{<obj>},{<obj>},{<obj>},{<obj>}]}

我已经引入了一个助手来进行一些相等/大于/小于比较，并且已经成功地以这种方式识别了初始项目，但没有运气访问我的目标数组的长度.

Handlebars.registerHelper('compare', function(lvalue, rvalue, options) {...})"{{#each_with_index 列}}"+"<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}}

{{/每个}}

<小时>

我写的一个快速帮手是:

Handlebars.registerHelper("foreach",function(arr,options) {if(options.inverse && !arr.length)返回 options.inverse(this);返回 arr.map(function(item,index) {item.$index = 索引；item.$first = index === 0;item.$last = index === arr.length-1;返回 options.fn(item);}).加入('');});

然后你可以写:

{{#foreach foo}}<div class='{{#if $first}} first{{/if}}{{#if $last}} last{{/if}}'></div>{{/foreach}}

I am leveraging handlebars.js for my templating engine and am looking to make a conditional segment display only if it is the last item in array contained in the templates configuration object.

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

I've already pulled in a helper to do some equality/greater/less-than comparisons and have had success identifying the initial item this way but have had no luck accessing my target array's length.

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

Does anyone know a shortcut, different approach, and some handlebars goodness that will keep me from having to tear into the handlebars.js engine to determine best course?

解决方案

As of Handlebars v1.1.0, you can now use the @first and @last booleans in the each helper for this problem:

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

---

A quick helper I wrote to do the trick is:

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('');
});

Then you can write:

{{#foreach foo}}
    <div class='{{#if $first}} first{{/if}}{{#if $last}} last{{/if}}'></div>
{{/foreach}}

这篇关于使用 handlebars.js 模板以数组中的最后一项为条件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！