handlebars.js template to check the condition based on the last item in an array

Question

handlebars.js template to check the condition based on the last item in an array

I am currently utilizing handlebars.js as my templating engine and am interested in creating a conditional segment that will only display if it happens to be the final item within an array located in the templates configuration object.

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

While I have already integrated a helper function for performing equality, greater than, and less than comparisons, I am encountering difficulties in determining the length of the target array.

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

I am seeking alternative methods, a possible shortcut, or any handlebars tips that could help me avoid having to delve deep into the handlebars.js engine to find an optimal solution. Does anyone have any suggestions?

javascript arrays helper handlebars.js templating

Answer 1

Answer №1

Starting from version 1.1.0 of Handlebars, the each helper now includes built-in support for first and last elements. This enhancement can be tracked in issue #483.

An example of this new feature can be seen in the implementation inspired by Eberanov:

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

Answer 2

Starting from version 1.1.0 of Handlebars, the each helper now includes built-in support for first and last elements. This enhancement can be tracked in issue #483.

An example of this new feature can be seen in the implementation inspired by Eberanov:

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

Answer 3

Answer №2

A new feature has been introduced in Handlebars v1.1.0 which allows you to utilize the @first and @last booleans in the each helper to tackle this issue:

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

I came up with a helpful solution to achieve this:

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

Then you can implement it like this:

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

Answer 4

A new feature has been introduced in Handlebars v1.1.0 which allows you to utilize the @first and @last booleans in the each helper to tackle this issue:

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

I came up with a helpful solution to achieve this:

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

Then you can implement it like this:

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

Answer 5

Answer №3

To address the initial element of the array, consider focusing on iterating through the data source

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

The @index value is generated by the each helper, and when dealing with the first element, it will be zero and can consequently be managed by the if helper.

Answer 6

To address the initial element of the array, consider focusing on iterating through the data source

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

The @index value is generated by the each helper, and when dealing with the first element, it will be zero and can consequently be managed by the if helper.

Answer 7

Answer №4

Resolution:

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

Utilizing assistance from the subsequent blog and gist...

https://gist.github.com/2889952

// {{#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];

    // attach an index property to the item, starting at 1, can be made configurable later
    item.index = i+1;
    item.total = total;
    // display the content inside the block
    buffer += fn(item);
  }

  // return the completed 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 recognize the operator "+operator);

    var result = operators[operator](lvalue,rvalue);

    if( result ) {
        return options.fn(this);
    } else {
        return options.inverse(this);
    }

});

Take note that the initial index is correctly set to 1.

Answer 8

Resolution:

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

Utilizing assistance from the subsequent blog and gist...

https://gist.github.com/2889952

// {{#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];

    // attach an index property to the item, starting at 1, can be made configurable later
    item.index = i+1;
    item.total = total;
    // display the content inside the block
    buffer += fn(item);
  }

  // return the completed 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 recognize the operator "+operator);

    var result = operators[operator](lvalue,rvalue);

    if( result ) {
        return options.fn(this);
    } else {
        return options.inverse(this);
    }

});

Take note that the initial index is correctly set to 1.

Answer 9

Answer №5

I have enhanced a helper developed by Matt Brennan to work with Objects or Arrays using the 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('');
});

Usage:

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

Answer 10

I have enhanced a helper developed by Matt Brennan to work with Objects or Arrays using the 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('');
});

Usage:

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

Answer 11

Answer №6

In case you find yourself in a situation where you are dealing with Handlebars version below 1.1.0 (just like I did), here's a potential workaround you can consider:

Create a custom property called isLast on the objects you are looping through, and incorporate it as follows:

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

This method can be utilized to construct a JSON object.

Answer 12

In case you find yourself in a situation where you are dealing with Handlebars version below 1.1.0 (just like I did), here's a potential workaround you can consider:

Create a custom property called isLast on the objects you are looping through, and incorporate it as follows:

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

This method can be utilized to construct a JSON object.

handlebars.js template to check the condition based on the last item in an array

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Answer №6

Similar questions

Integrate predictive text suggestions in JavaServer Pages for efficient form filling

Error: Unable to locate npm package

Error: JSON parsing stopped due to unexpected end of file while attempting to parse data

Synchronous execution of functions in Node.js

Reverse lookup and deletion using Mongoose

Is there a way to have a span update its color upon clicking a link?

Standardize the case of array keys within PHP

Signing in using Passport.js with mongoDB authentication

Dealing with the percentage sign in table names during data retrieval

Adjustable height and maximum height with overflow functionality

Utilizing lazy evaluation, multiple functions are triggered by ng-click in succession

Firefox does not allow contenteditable elements to be edited if they are nested inside a parent element that is draggable

Transferring cookies across subdomains

The Ink CLI is anticipating the component to be a function

Issues with Login and Register functionality in a node.js application using MongoDB

Tips for preserving the Context API state when navigating between pages in Next.js

AngularJS ng-focus does not function properly with iframes

Guide on initiating document-wide events using Jasmine tests in Angular 2/4

Why is it necessary to use "new" with a Mongoose model in TypeScript?

Dynamic search form technology