abhängig vom letzten Element im Array mithilfe der Vorlage handlebars.js

Ich nutze handlebars.js für meine Vorlagen-Engine und möchte nur dann eine bedingte Segmentanzeige erstellen, wenn es sich um das letzte Element im Array handelt, das im Vorlagenkonfigurationsobjekt enthalten ist.

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

Ich habe bereits einen Helfer hinzugezogen, um Vergleiche zwischen Gleichheit / Größer / Kleiner als durchzuführen, und hatte Erfolg bei der Identifizierung des ursprünglichen Elements auf diese Weise, hatte aber kein Glück, auf die Länge meines Zielarrays zuzugreifen.

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

Kennt jemand eine Abkürzung, einen anderen Ansatz und einige gute Eigenschaften des Lenkers, die mich davon abhalten, in den Motor des Lenkers einzudringen, um den besten Kurs zu bestimmen?

Ab Handlebars v1.1.0 können Sie jetzt die Booleschen Werte @firstund @lastin jedem Helfer für dieses Problem verwenden:

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

Ein schneller Helfer, den ich geschrieben habe, um den Trick zu machen, ist:

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

Dann können Sie schreiben:

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

Seit Lenker 1.1.0 ist der erste und letzte für jeden Helfer einheimisch geworden. Siehe Ticket Nr. 483 .

Die Verwendung ist wie in Eberanovs Helferklasse :

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

Wenn Sie nur versuchen, das erste Element des Arrays zu verarbeiten, kann dies hilfreich sein

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

@index wird von jedem Helfer bereitgestellt und für das erste Element wäre es gleich Null und kann daher vom if-Helfer behandelt werden.

Lösung:

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

Nutzen Sie Helfer aus dem folgenden Blog und ...

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

});

Beachten Sie, dass der Startindex korrekt 1 ist.

Ich habe den Helfer von Matt Brennan ein wenig verbessert. Sie können diesen Helfer mit Objekten oder Arrays verwenden. Für diese Lösung ist eine Unterstreichungsbibliothek erforderlich :

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

Verwendung:

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

Nur zu Ihrer Information: Wenn Sie mit Lenkern <1.1.0 (wie ich) nicht weiterkommen, sollten Sie diese Problemumgehung ausprobieren:

Definieren Sie eine Eigenschaft wie isLastfür die Objekte, die Sie iterieren, und verwenden Sie sie wie

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

um ein JSON-Objekt zu erstellen.