Handlebars: Parent Context

Everytime when you enter a new block and current context changed, the new context will be pushed into the context stack. The old context becomes parent context, you can use {{..}} to access parent context.

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

Samples

lightncandy

Used option: FLAG_PARENT

Data:

array(
  "foo" => array(
    array(
      "bar" => "Yes!"
    )
  ),
  "bar" => "Another World"
)

Template:

{{#each foo}}{{bar}}, {{../bar}}{{/each}}

Result:

Yes!, Another World

Source Code

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

$php = LightnCandy::compile($template, array(
  "flags" => LightnCandy::FLAG_PARENT
));
$render = LightnCandy::prepare($php);
$data = array(
  "foo" => array(
    array(
      "bar" => "Yes!"
    )
  ),
  "bar" => "Another World"
);
echo $render($data);

handlebars.js

Data:

{
  "foo": [
    {
      "bar": "Yes!"
    }
  ],
  "bar": "Another World"
}

Template:

{{#each foo}}{{bar}}, {{../bar}}{{/each}}

Result:

Yes!, Another World

Source Code

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

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

lightncandy

Used option: FLAG_PARENT

Data:

array(
  "foo" => array(
    "0" => array(
      "bar" => array(
        "0" => "ABC",
        "1" => "DEF",
        "qoo" => "GHI"
      ),
      "qoo" => "STU"
    ),
    "1" => array(
      "bar" => array(
        "0" => "V",
        "1" => "W",
        "qoo" => "XYZ"
      ),
      "qoo" => "YO!"
    )
  ),
  "qoo" => "YA!"
)

Template:

{{#each foo}}
  {{#each bar}}
    {{.}},{{../qoo}},{{../../qoo}}
  {{/each}}
{{/each}}

Result:

    ABC,STU,YA!
    DEF,STU,YA!
    GHI,STU,YA!
    V,YO!,YA!
    W,YO!,YA!
    XYZ,YO!,YA!

Source Code

require('./vendor/autoload.php');
use LightnCandy\LightnCandy;
$template = "{{#each foo}}\n  {{#each bar}}\n    {{.}},{{../qoo}},{{../../qoo}}\n  {{/each}}\n{{/each}}\n";

$php = LightnCandy::compile($template, array(
  "flags" => LightnCandy::FLAG_PARENT
));
$render = LightnCandy::prepare($php);
$data = array(
  "foo" => array(
    "0" => array(
      "bar" => array(
        "0" => "ABC",
        "1" => "DEF",
        "qoo" => "GHI"
      ),
      "qoo" => "STU"
    ),
    "1" => array(
      "bar" => array(
        "0" => "V",
        "1" => "W",
        "qoo" => "XYZ"
      ),
      "qoo" => "YO!"
    )
  ),
  "qoo" => "YA!"
);
echo $render($data);

handlebars.js

Data:

{
  "foo": {
    "0": {
      "bar": {
        "0": "ABC",
        "1": "DEF",
        "qoo": "GHI"
      },
      "qoo": "STU"
    },
    "1": {
      "bar": {
        "0": "V",
        "1": "W",
        "qoo": "XYZ"
      },
      "qoo": "YO!"
    }
  },
  "qoo": "YA!"
}

Template:

{{#each foo}}
  {{#each bar}}
    {{.}},{{../qoo}},{{../../qoo}}
  {{/each}}
{{/each}}

Result:

    ABC,STU,YA!
    DEF,STU,YA!
    GHI,STU,YA!
    V,YO!,YA!
    W,YO!,YA!
    XYZ,YO!,YA!

Source Code

var Handlebars = require('handlebars');
var template = '{{#each foo}}\n  {{#each bar}}\n    {{.}},{{../qoo}},{{../../qoo}}\n  {{/each}}\n{{/each}}\n';

var render = Handlebars.compile(template);
var data = {
  "foo": {
    "0": {
      "bar": {
        "0": "ABC",
        "1": "DEF",
        "qoo": "GHI"
      },
      "qoo": "STU"
    },
    "1": {
      "bar": {
        "0": "V",
        "1": "W",
        "qoo": "XYZ"
      },
      "qoo": "YO!"
    }
  },
  "qoo": "YA!"
};
console.log(render(data));

Handlebars: Parent Context

Samples

lightncandy

handlebars.js

lightncandy

handlebars.js

See Also...

Search the cookbook