使用 handlebars.js 模板对数组中的最后一项进行条件设置

小开

解决方案:

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

小开

最佳答案

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

@ index 由每个助手提供，对于第一个条目，它等于零，因此可以由 if 助手处理。

小开

我从 Matt Brennan中对 helper 做了一些改进，你可以使用这个 helper 来处理对象或者数组，这个解决方案需要下划线库:

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

小开

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

其用法类似于 Eberanov 的助手类:

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

小开

仅供参考: 如果你被车把 < 1.1.0(像我一样)卡住了，你可以试试这个变通方法:

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

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

构建一个 JSON 对象。