I want to implement a custom variable @itemX for a 2d matrix. How do I implement it?

[satyajitnayk]

This is my template

{{#grid items col_size=3}}
  {{#each this}}
  [ {{@item1}} | {{@item2}} | {{@item3}} ]
  {{/each}}
{{/grid}}

where grid is a custom function that returns a 2d array from 1d array as follows =>

i/p: items = ["1", "2", "3", "4", "5", "6"], col_size=3
o/p: [ [1,2,3], [4,5,6] ] 

final o/p:
| 1 | 2 | 3 |
| 4 | 5 | 6 |

Details:

• For col size = 3, for itemX the value of X ranges from [1...3] I need to implement it such that
• for context [1,2,3] {{@item1}} prints 1 , {{@item2}} prints 2
• for context [4,5,6] {{@item1}} prints 4 , {{@item2}} prints 5

Any help to understand the line instance.registerHelper('each', function (context, options) {} in file https://github.dev/handlebars-lang/handlebars.js is highly appreciated

[jaylinski]

Does this help?

https://handlebarsjs.com/playground.html#format=1&currentExample=%7B%22template%22%3A%22%7B%7B%23each%20items%7D%7D%5Cn%20%20%5B%7B%7B%23each%20this%7D%7D%7B%7B%20this%20%7D%7D%7B%7B%23unless%20%40last%7D%7D%7C%7B%7B%2Funless%7D%7D%7B%7B%2Feach%7D%7D%5D%5Cn%7B%7B%2Feach%7D%7D%22%2C%22partials%22%3A%5B%5D%2C%22input%22%3A%22%7B%5Cn%20%20items%3A%20%5B%5Cn%20%20%20%20%5B1%2C%202%2C%203%5D%2C%5Cn%20%20%20%20%5B4%2C%205%2C%206%5D%5Cn%20%20%5D%5Cn%7D%22%2C%22output%22%3A%22%20%20%5B1%7C2%7C3%5D%5Cn%20%20%5B4%7C5%7C6%5D%5Cn%22%2C%22preparationScript%22%3A%22%22%2C%22handlebarsVersion%22%3A%224.7.7%22%7D

Here's the documentation for #each: https://handlebarsjs.com/guide/builtin-helpers.html#each

[satyajitnayk]

I am able to implement only for 1st & 3rd template but not for 2nd one
https://handlebarsjs.com/playground.html#format=1&currentExample=%7B%22template%22%3A%22%7B%7B%23grid%20items%20col_size%3D3%7D%7D%5Cn%20%20%7B%7B%23each%20this%7D%7D%5Cn%20%20%7B%7B%23each%20this%7D%7D%20%7B%7Blog%20this%7D%7D%20%7C%20%7B%7B%2Feach%7D%7D%5Cn%20%20%7B%7B%2Feach%7D%7D%5Cn%7B%7B%2Fgrid%7D%7D%22%2C%22partials%22%3A%5B%5D%2C%22input%22%3A%22%7B%5Cn%20%20items%3A%20%5B1%2C2%2C3%2C4%2C5%2C6%2C7%5D%2C%5Cn%7D%5Cn%22%2C%22output%22%3A%22%5Bobject%20Object%5D%2C%5Bobject%20Object%5D%2C%5Bobject%20Object%5D%22%2C%22preparationScript%22%3A%22Handlebars.registerHelper('grid'%2C%20function(items%2C%20options)%20%7B%5Cn%20%20var%20colSize%20%3D%20options.hash.col_size%3B%5Cn%20%20var%20output%20%3D%20%5B%5D%3B%5Cn%5Cn%20%20for%20(var%20i%20%3D%200%3B%20i%20%3C%20items.length%3B%20i%20%2B%3D%20colSize)%20%7B%5Cn%20%20%20%20var%20rowItems%20%3D%20items.slice(i%2C%20i%20%2B%20colSize)%3B%5Cn%20%20%20%20var%20context%20%3D%20%7B%5Cn%20%20%20%20%20%20row%3A%20rowItems%5Cn%20%20%20%20%7D%3B%5Cn%20%20%20%20for%20(var%20j%20%3D%200%3B%20j%20%3C%20rowItems.length%3B%20j%2B%2B)%20%7B%5Cn%20%20%20%20%20%20context%5B'%40item'%20%2B%20(j%20%2B%201)%5D%20%3D%20rowItems%5Bj%5D%3B%5Cn%20%20%20%20%7D%5Cn%5Ctoutput.push(%7BrowItems%2C%20context%7D)%3B%5Cn%20%20%7D%5Cn%20%20console.log(output)%3B%5Cn%20%20return%20output%3B%5Cn%7D)%3B%5Cn%22%2C%22handlebarsVersion%22%3A%224.7.7%22%7D

[jaylinski]

Here's an example of a helper splitting an array:

https://handlebarsjs.com/playground.html#format=1&currentExample=%7B%22template%22%3A%22%7B%7B%23grid%20items%203%7D%7D%5Cn%20%20%7B%7Bthis%7D%7D%5Cn%7B%7B%2Fgrid%7D%7D%5Cn%22%2C%22partials%22%3A%5B%5D%2C%22input%22%3A%22%7B%5Cn%20%20items%3A%20%5B1%2C%202%2C%203%2C%204%2C%205%2C%206%5D%5Cn%7D%22%2C%22output%22%3A%22%20%201%2C2%2C3%5Cn%20%204%2C5%2C6%5Cn%22%2C%22preparationScript%22%3A%22Handlebars.registerHelper('grid'%2C%20function%20(items%2C%20column_size%2C%20options)%20%7B%5Cn%20%20let%20chunks%20%3D%20''%3B%5Cn%20%20for%20(let%20i%20%3D%200%3B%20i%20%3C%20items.length%3B%20i%20%2B%3D%20column_size)%20%7B%5Cn%20%20%20%20chunks%20%2B%3D%20options.fn(items.slice(i%2C%20i%20%2B%20column_size))%3B%5Cn%20%20%7D%5Cn%20%20return%20chunks%3B%5Cn%7D)%5Cn%22%2C%22handlebarsVersion%22%3A%224.7.7%22%7D

Have a look here for more examples:
https://github.com/helpers/handlebars-helpers/blob/5d3405f178a9ec4c90df3c7dc07b4faf9a09dfd7/lib/array.js

[satyajitnayk]

How can I create my own custom @variable i.e. @item1 @Item2 ....etc for the grid helper function below to support the template below ?
helper function

Handlebars.registerHelper('grid', function (items, options) {
  const matrix = [];
  const {col_size} = options.hash;
  for (let i = 0; i < items.length; i += col_size) {
    const row = items.slice(i, i + col_size);
    matrix.push(row);
  }
  return options.fn(matrix);
});

Template1

{{#grid items col_size=3}}
  {{#each this}}
  [ {{@item1}} | {{@item2}} | {{@item3}} ]
  {{/each}}
{{/grid}}

Template2

{{#grid items col_size=3}}
  {{#each this}}
  {{#each this}} {{this}} | {{/each}}
  {{/each}}
{{/grid}}

[jaylinski]

If you really want to do that, you can use the data-param as can be seen here:

handlebars.js/lib/handlebars/helpers/each.js

Line 35 in e668696

data: data,

[satyajitnayk]

Thanks a lot @jaylinski for your patience & help. 😊