Handlebars: Built-in block helper - #each

Loop on an Array or Object.

This is a handlebars.js extension, mustache do not support this.

Samples

Loop on an array.

lightncandy
Data:
array(
  "foo" => array(
    "Hello",
    "World"
  )
)
Template:
{{#each foo}}{{.}}!{{/each}}
Result:
Hello!World!
Source Code 
require('./vendor/autoload.php');
use LightnCandy\LightnCandy;
$template = "{{#each foo}}{{.}}!{{/each}}";

$php = LightnCandy::compile($template);
$render = LightnCandy::prepare($php);
$data = array(
  "foo" => array(
    "Hello",
    "World"
  )
);
echo $render($data);
handlebars.js
Data:
{
  "foo": [
    "Hello",
    "World"
  ]
}
Template:
{{#each foo}}{{.}}!{{/each}}
Result:
Hello!World!
Source Code 
var Handlebars = require('handlebars');
var template = '{{#each foo}}{{.}}!{{/each}}';

var render = Handlebars.compile(template);
var data = {
  "foo": [
    "Hello",
    "World"
  ]
};
console.log(render(data));

When looping on an array, use {{@index}} for current index in the loop.

lightncandy

Used option: FLAG_SPVARS

Data:
array(
  "foo" => array(
    "Hello",
    "World"
  )
)
Template:
{{#each foo}}
{{@index}}: {{.}}!
{{/each}}
Result:
0: Hello!
1: World!
Source Code 
require('./vendor/autoload.php');
use LightnCandy\LightnCandy;
$template = "{{#each foo}}\n{{@index}}: {{.}}!\n{{/each}}";

$php = LightnCandy::compile($template, array(
  "flags" => LightnCandy::FLAG_SPVARS
));
$render = LightnCandy::prepare($php);
$data = array(
  "foo" => array(
    "Hello",
    "World"
  )
);
echo $render($data);
handlebars.js
Data:
{
  "foo": [
    "Hello",
    "World"
  ]
}
Template:
{{#each foo}}
{{@index}}: {{.}}!
{{/each}}
Result:
0: Hello!
1: World!
Source Code 
var Handlebars = require('handlebars');
var template = '{{#each foo}}\n{{@index}}: {{.}}!\n{{/each}}';

var render = Handlebars.compile(template);
var data = {
  "foo": [
    "Hello",
    "World"
  ]
};
console.log(render(data));

Loop on an Object.

lightncandy
Data:
array(
  "foo" => array(
    "key" => "Hello",
    "key2" => "World"
  )
)
Template:
{{#each foo}}{{.}}!{{/each}}
Result:
Hello!World!
Source Code 
require('./vendor/autoload.php');
use LightnCandy\LightnCandy;
$template = "{{#each foo}}{{.}}!{{/each}}";

$php = LightnCandy::compile($template);
$render = LightnCandy::prepare($php);
$data = array(
  "foo" => array(
    "key" => "Hello",
    "key2" => "World"
  )
);
echo $render($data);
handlebars.js
Data:
{
  "foo": {
    "key": "Hello",
    "key2": "World"
  }
}
Template:
{{#each foo}}{{.}}!{{/each}}
Result:
Hello!World!
Source Code 
var Handlebars = require('handlebars');
var template = '{{#each foo}}{{.}}!{{/each}}';

var render = Handlebars.compile(template);
var data = {
  "foo": {
    "key": "Hello",
    "key2": "World"
  }
};
console.log(render(data));

When looping on an object, use {{@key}} for current key in the loop.

lightncandy

Used option: FLAG_SPVARS

Data:
array(
  "foo" => array(
    "first" => "Hello",
    "second" => "World"
  )
)
Template:
{{#each foo}}
{{@key}}:{{.}}!
{{/each}}
Result:
first:Hello!
second:World!
Source Code 
require('./vendor/autoload.php');
use LightnCandy\LightnCandy;
$template = "{{#each foo}}\n{{@key}}:{{.}}!\n{{/each}}";

$php = LightnCandy::compile($template, array(
  "flags" => LightnCandy::FLAG_SPVARS
));
$render = LightnCandy::prepare($php);
$data = array(
  "foo" => array(
    "first" => "Hello",
    "second" => "World"
  )
);
echo $render($data);
handlebars.js
Data:
{
  "foo": {
    "first": "Hello",
    "second": "World"
  }
}
Template:
{{#each foo}}
{{@key}}:{{.}}!
{{/each}}
Result:
first:Hello!
second:World!
Source Code 
var Handlebars = require('handlebars');
var template = '{{#each foo}}\n{{@key}}:{{.}}!\n{{/each}}';

var render = Handlebars.compile(template);
var data = {
  "foo": {
    "first": "Hello",
    "second": "World"
  }
};
console.log(render(data));

Use .. to access parent context inside the #each

lightncandy

Used option: FLAG_SPVARS FLAG_PARENT

Data:
array(
  "foo" => array(
    "first" => "Hello",
    "second" => "World"
  ),
  "title" => "Values"
)
Template:
{{#each foo}}
{{../title}}:{{.}}!
{{/each}}
Result:
Values:Hello!
Values:World!
Source Code 
require('./vendor/autoload.php');
use LightnCandy\LightnCandy;
$template = "{{#each foo}}\n{{../title}}:{{.}}!\n{{/each}}";

$php = LightnCandy::compile($template, array(
  "flags" => LightnCandy::FLAG_SPVARS | LightnCandy::FLAG_PARENT
));
$render = LightnCandy::prepare($php);
$data = array(
  "foo" => array(
    "first" => "Hello",
    "second" => "World"
  ),
  "title" => "Values"
);
echo $render($data);
handlebars.js
Data:
{
  "foo": {
    "first": "Hello",
    "second": "World"
  },
  "title": "Values"
}
Template:
{{#each foo}}
{{../title}}:{{.}}!
{{/each}}
Result:
Values:Hello!
Values:World!
Source Code 
var Handlebars = require('handlebars');
var template = '{{#each foo}}\n{{../title}}:{{.}}!\n{{/each}}';

var render = Handlebars.compile(template);
var data = {
  "foo": {
    "first": "Hello",
    "second": "World"
  },
  "title": "Values"
};
console.log(render(data));

#each do not work on string

lightncandy

Used option: FLAG_SPVARS FLAG_PARENT

Data:
array(
  "foo" => "Good"
)
Template:
{{#each foo}}
{{.}}!
{{/each}}
Result:
Source Code 
require('./vendor/autoload.php');
use LightnCandy\LightnCandy;
$template = "{{#each foo}}\n{{.}}!\n{{/each}}";

$php = LightnCandy::compile($template, array(
  "flags" => LightnCandy::FLAG_SPVARS | LightnCandy::FLAG_PARENT
));
$render = LightnCandy::prepare($php);
$data = array(
  "foo" => "Good"
);
echo $render($data);
handlebars.js
Data:
{
  "foo": "Good"
}
Template:
{{#each foo}}
{{.}}!
{{/each}}
Result:
Source Code 
var Handlebars = require('handlebars');
var template = '{{#each foo}}\n{{.}}!\n{{/each}}';

var render = Handlebars.compile(template);
var data = {
  "foo": "Good"
};
console.log(render(data));

See Also...

Search the cookbook

Generated at 2022-03-21T13:13:56.019Z