javascript - example - handlebars template js

Condicional en el último elemento de la matriz usando la plantilla de handlebars.js

Question

Estoy aprovechando manubs.js para mi motor de plantillas y estoy buscando hacer una visualización de segmentos condicional solo si es el último elemento en la matriz que figura en el objeto de configuración de plantillas.

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

Ya obtuve un ayudante para hacer algunas comparaciones de igualdad / mayor / menor que y he tenido éxito identificando el artículo inicial de esta manera, pero no he tenido suerte accediendo a la longitud de mi matriz objetivo.

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

¿Alguien conoce un atajo, un enfoque diferente y algunas bondades de manubrio que me impidan tener que romper con el motor de manubrio para determinar el mejor rumbo?

Answer 1

A partir de Handlebars v1.1.0, ahora puede usar los booleanos @first y @last en cada ayudante para este problema:

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

Un rápido ayudante que escribí para hacer el truco es:

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

Entonces puedes escribir:

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

Answer 2

Desde Handlebars 1.1.0, el primero y el último se han convertido en nativos de cada ayudante. Ver boleto #483 .

El uso es como Eberanov''s clase de ayuda Eberanov''s :

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

Answer 3

Hice algunas mejoras en el ayudante de , puedes usar esta ayuda con Objetos o Arrays, esta solución requiere una biblioteca 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('''');
});

Uso:

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

Answer 4

Si solo intenta manejar el primer elemento de la matriz, esto puede ayudar

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

@index es proporcionado por cada ayudante y para el primer elemento, sería igual a cero y, por lo tanto, puede ser manejado por el if helper.

Answer 5

Solución:

<div class=''{{#compare index 1}} first{{/compare}}{{#compare index total}} last{{/compare}}''></div>

Aprovechando los ayudantes del siguiente blog y esencia ...

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

Tenga en cuenta que el índice inicial es correctamente 1.