条件在数组中的最后一个项目使用handlebars.js模板

我正在为我的模板引擎利用handlebars.js，并且只在模板configuration对象中包含的最后一个数组项是最后一个条件段显示。

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

我已经帮助了一个帮助者做了一些平等/更大/更less的比较，并已经成功地确定了这个初始项目，但没有运气访问我的目标数组的长度。

 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引擎，以确定最佳的路线？

Answer 1

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

Answer 2

由于把手1.1.0，第一个和最后一个已经成为每个帮手的本地。 见票＃483 。

用法就像Eberanov的助手类：

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

Answer 3

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

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

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

Answer 4

解：

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

Answer 5

我从Matt Brennan的帮手中做了一些改进，你可以在Objects或者Arrays中使用这个帮助器，这个解决scheme需要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}}