VOOZH about

URL: https://zordius.github.io/HandlebarsCookbook/0028-dynamicpartial.html

⇱ Handlebars Cookbook - Handlebars: Dynamic Partial

Handlebars: Dynamic Partial

You can use a subexpression as partial name. The partial name will be decided by the result of custom helper at run time.

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

Samples

The return value of helper foo will be partial name

lightncandy

Used option: FLAG_ADVARNAME FLAG_RUNTIMEPARTIAL

Partials:
bar1Hello
bar2World
Data:
NULL
Template:
{{>(foo 1)}}, {{>(foo 2)}}
Result:
Hello, World

Check the code to know used helper codes

Source Code 
require('./vendor/autoload.php');
use LightnCandy\LightnCandy;
$template = "{{>(foo 1)}}, {{>(foo 2)}}";

$php = LightnCandy::compile($template, array(
 "flags" => LightnCandy::FLAG_ADVARNAME | LightnCandy::FLAG_RUNTIMEPARTIAL,
 "partials" => array(
 "bar1" => "Hello",
 "bar2" => "World"
 ),
 "helpers" => array(
 "foo" => function ($arg1) {
 return 'bar' . $arg1;
 }
 )
));
$render = LightnCandy::prepare($php);
$data = NULL;
echo $render($data);
handlebars.js
Partials:
bar1Hello
bar2World
Data:
null
Template:
{{>(foo 1)}}, {{>(foo 2)}}
Result:
Hello, World

Check the code to know used helper codes

Source Code 
var Handlebars = require('handlebars');
var template = '{{>(foo 1)}}, {{>(foo 2)}}';

Handlebars.registerHelper({
 'foo': function (arg1) {
 return 'bar' + arg1;
 }
});
var render = Handlebars.compile(template);
var data = null;
console.log(render(data, {
 partials: {
 "bar1": "Hello",
 "bar2": "World"
}}));

When partial name is not exist it will cause runtime error

lightncandy

Used option: FLAG_ADVARNAME FLAG_RUNTIMEPARTIAL

Partials:
bar1Hello
bar2World
Data:
NULL
Template:
{{>(foo)}}
Result:
Can not find partial named as 'bar_not_found' !!

Check the code to know used helper codes

Source Code 
require('./vendor/autoload.php');
use LightnCandy\LightnCandy;
$template = "{{>(foo)}}";

$php = LightnCandy::compile($template, array(
 "flags" => LightnCandy::FLAG_ADVARNAME | LightnCandy::FLAG_RUNTIMEPARTIAL,
 "partials" => array(
 "bar1" => "Hello",
 "bar2" => "World"
 ),
 "helpers" => array(
 "foo" => function () {
 return 'bar_not_found';
 }
 )
));
$render = LightnCandy::prepare($php);
$data = NULL;
echo $render($data);
handlebars.js
Partials:
bar1Hello
bar2World
Data:
null
Template:
{{>(foo)}}
Result:
The partial bar_not_found could not be found

Check the code to know used helper codes

Source Code 
var Handlebars = require('handlebars');
var template = '{{>(foo)}}';

Handlebars.registerHelper({
 'foo': function () {
 return 'bar_not_found';
 }
});
var render = Handlebars.compile(template);
var data = null;
console.log(render(data, {
 partials: {
 "bar1": "Hello",
 "bar2": "World"
}}));

You can use the lookup helper to return the template's name from an object

lightncandy

Used option: FLAG_ADVARNAME FLAG_RUNTIMEPARTIAL

Partials:
enHello {{name}}.
esHola {{name}}.
frBonjour {{name}}.
Data:
array(
 "foo" => array(
 array(
 "template" => "en",
 "name" => "alice"
 ),
 array(
 "template" => "es",
 "name" => "bob"
 ),
 array(
 "template" => "fr",
 "name" => "casey"
 )
 )
)
Template:
{{#each foo}}{{> (lookup . 'template')}}{{/each}}
Result:
Hello alice. Hola bob. Bonjour casey.
Source Code 
require('./vendor/autoload.php');
use LightnCandy\LightnCandy;
$template = "{{#each foo}}{{> (lookup . 'template')}}{{/each}}";

$php = LightnCandy::compile($template, array(
 "flags" => LightnCandy::FLAG_ADVARNAME | LightnCandy::FLAG_RUNTIMEPARTIAL,
 "partials" => array(
 "en" => "Hello {{name}}. ",
 "es" => "Hola {{name}}. ",
 "fr" => "Bonjour {{name}}."
 )
));
$render = LightnCandy::prepare($php);
$data = array(
 "foo" => array(
 array(
 "template" => "en",
 "name" => "alice"
 ),
 array(
 "template" => "es",
 "name" => "bob"
 ),
 array(
 "template" => "fr",
 "name" => "casey"
 )
 )
);
echo $render($data);
handlebars.js
Partials:
enHello {{name}}.
esHola {{name}}.
frBonjour {{name}}.
Data:
{
 "foo": [
 {
 "template": "en",
 "name": "alice"
 },
 {
 "template": "es",
 "name": "bob"
 },
 {
 "template": "fr",
 "name": "casey"
 }
 ]
}
Template:
{{#each foo}}{{> (lookup . 'template')}}{{/each}}
Result:
Hello alice. Hola bob. Bonjour casey.
Source Code 
var Handlebars = require('handlebars');
var template = '{{#each foo}}{{> (lookup . \'template\')}}{{/each}}';

var render = Handlebars.compile(template);
var data = {
 "foo": [
 {
 "template": "en",
 "name": "alice"
 },
 {
 "template": "es",
 "name": "bob"
 },
 {
 "template": "fr",
 "name": "casey"
 }
 ]
};
console.log(render(data, {
 partials: {
 "en": "Hello {{name}}. ",
 "es": "Hola {{name}}. ",
 "fr": "Bonjour {{name}}."
}}));

You can use dynamic partials to load templates from within a list of their names

lightncandy

Used option: FLAG_ADVARNAME FLAG_RUNTIMEPARTIAL

Partials:
aHello
bWorld
c!
Data:
array(
 "foo" => array(
 "a",
 "b",
 "c"
 )
)
Template:
{{#each foo}}{{> (bar .)}}{{/each}}
Result:
HelloWorld!

Check the code to know used helper codes

Source Code 
require('./vendor/autoload.php');
use LightnCandy\LightnCandy;
$template = "{{#each foo}}{{> (bar .)}}{{/each}}";

$php = LightnCandy::compile($template, array(
 "flags" => LightnCandy::FLAG_ADVARNAME | LightnCandy::FLAG_RUNTIMEPARTIAL,
 "partials" => array(
 "a" => "Hello",
 "b" => "World",
 "c" => "!"
 ),
 "helpers" => array(
 "bar" => function ($arg) {
 return $arg;
 }
 )
));
$render = LightnCandy::prepare($php);
$data = array(
 "foo" => array(
 "a",
 "b",
 "c"
 )
);
echo $render($data);
handlebars.js
Partials:
aHello
bWorld
c!
Data:
{
 "foo": [
 "a",
 "b",
 "c"
 ]
}
Template:
{{#each foo}}{{> (bar .)}}{{/each}}
Result:
HelloWorld!

Check the code to know used helper codes

Source Code 
var Handlebars = require('handlebars');
var template = '{{#each foo}}{{> (bar .)}}{{/each}}';

Handlebars.registerHelper({
 'bar': function (arg) {
 return arg;
}
});
var render = Handlebars.compile(template);
var data = {
 "foo": [
 "a",
 "b",
 "c"
 ]
};
console.log(render(data, {
 partials: {
 "a": "Hello",
 "b": "World",
 "c": "!"
}}));

See Also...

Search the cookbook

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