it-swarm.com.de

bedingung für das letzte Element im Array unter Verwendung der Vorlage "handlebars.js"

Ich benutze handlebars.js für meine Templating Engine und möchte nur dann ein bedingtes Segment anzeigen, wenn es das letzte Element im Array ist, das im Konfigurationsobjekt der Vorlagen enthalten ist.

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

Ich habe bereits einen Helfer herangezogen, um Vergleiche mit Gleichheit/Größer/Weniger als durchzuführen, und es war erfolgreich, das ursprüngliche Element auf diese Weise zu identifizieren, 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, eine andere Herangehensweise und etwas Lenkergüte, die mich daran hindern muss, in den Lenker zu geraten, um den besten Kurs zu bestimmen?

60
techie.brandon

Ab Handlebars v1.1.0 können Sie jetzt die Booleans @first und @last in 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 für den Trick geschrieben habe, 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 kannst du schreiben:

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

Seit Handlebars 1.1.0 ist first und last für jeden Helfer nativ geworden. Siehe Ticket # 483 .

Die Verwendung ist wie Eberanovs Helfer-Klasse:

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

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

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

@index wird von jedem Helfer bereitgestellt, und für den ersten Artikel wäre er gleich Null und kann somit vom If-Helfer behandelt werden.

25
Yong Qu

Lösung:

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

Helfer aus dem folgenden Blog und Gist nutzen ...

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 richtig ist 1.

1
techie.brandon

Ich habe ein paar Verbesserungen in helper von Matt Brennan gemacht, Sie können diesen Helfer mit Objekten oder Arrays verwenden, diese Lösung benötigt Underscore library:

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

Verwendungszweck:

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