Block

A block is started with {{#foo}} and end with {{/foo}}.

Block for Loop

A block will loop inner content on an array.

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

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

var render = Handlebars.compile(template);
var data = {
  "foo": [
    1,
    3,
    5
  ]
};
console.log(render(data));
mustache
Data:
{
  "foo": [
    1,
    3,
    5
  ]
}
Template:
{{#foo}}Ya!{{/foo}}
Result:
Ya!Ya!Ya!
Source Code 
var Mustache = require('mustache');
var template = '{{#foo}}Ya!{{/foo}}';

var data = {
  "foo": [
    1,
    3,
    5
  ]
};
console.log(Mustache.render(template, data));

Block for True

A block will render inner content for an object.

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

$php = LightnCandy::compile($template);
$render = LightnCandy::prepare($php);
$data = array(
  "foo" => array(
    "bar" => NULL,
    "moo" => NULL
  )
);
echo $render($data);
handlebars.js
Data:
{
  "foo": {
    "bar": null,
    "moo": null
  }
}
Template:
{{#foo}}Ya!{{/foo}}
Result:
Ya!
Source Code 
var Handlebars = require('handlebars');
var template = '{{#foo}}Ya!{{/foo}}';

var render = Handlebars.compile(template);
var data = {
  "foo": {
    "bar": null,
    "moo": null
  }
};
console.log(render(data));
mustache
Data:
{
  "foo": {
    "bar": null,
    "moo": null
  }
}
Template:
{{#foo}}Ya!{{/foo}}
Result:
Ya!
Source Code 
var Mustache = require('mustache');
var template = '{{#foo}}Ya!{{/foo}}';

var data = {
  "foo": {
    "bar": null,
    "moo": null
  }
};
console.log(Mustache.render(template, data));

A block will render inner content for a string.

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

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

var render = Handlebars.compile(template);
var data = {
  "foo": "test"
};
console.log(render(data));
mustache
Data:
{
  "foo": "test"
}
Template:
{{#foo}}Ya!{{/foo}}
Result:
Ya!
Source Code 
var Mustache = require('mustache');
var template = '{{#foo}}Ya!{{/foo}}';

var data = {
  "foo": "test"
};
console.log(Mustache.render(template, data));

A block will render inner content for a number.

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

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

var render = Handlebars.compile(template);
var data = {
  "foo": 1
};
console.log(render(data));
mustache
Data:
{
  "foo": 1
}
Template:
{{#foo}}Ya!{{/foo}}
Result:
Ya!
Source Code 
var Mustache = require('mustache');
var template = '{{#foo}}Ya!{{/foo}}';

var data = {
  "foo": 1
};
console.log(Mustache.render(template, data));

Block for False

When the value is false, the inner content will not be rendered.

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

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

var render = Handlebars.compile(template);
var data = {
  "foo": false
};
console.log(render(data));
mustache
Data:
{
  "foo": false
}
Template:
{{#foo}}Ya!{{/foo}}
Result:
Source Code 
var Mustache = require('mustache');
var template = '{{#foo}}Ya!{{/foo}}';

var data = {
  "foo": false
};
console.log(Mustache.render(template, data));

When the value is null or undefined, the inner content will not be rendered.

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

$php = LightnCandy::compile($template);
$render = LightnCandy::prepare($php);
$data = array(
  "foo" => NULL
);
echo $render($data);
handlebars.js
Data:
{
  "foo": null
}
Template:
{{#foo}}Ya!{{/foo}}
Result:
Source Code 
var Handlebars = require('handlebars');
var template = '{{#foo}}Ya!{{/foo}}';

var render = Handlebars.compile(template);
var data = {
  "foo": null
};
console.log(render(data));
mustache
Data:
{
  "foo": null
}
Template:
{{#foo}}Ya!{{/foo}}
Result:
Source Code 
var Mustache = require('mustache');
var template = '{{#foo}}Ya!{{/foo}}';

var data = {
  "foo": null
};
console.log(Mustache.render(template, data));

empty array means false.

lightncandy
Data:
array(
  "foo" => array(

  )
)
Template:
{{#foo}}Ya!{{/foo}}
Result:
Source Code 
require('./vendor/autoload.php');
use LightnCandy\LightnCandy;
$template = "{{#foo}}Ya!{{/foo}}";

$php = LightnCandy::compile($template);
$render = LightnCandy::prepare($php);
$data = array(
  "foo" => array(

  )
);
echo $render($data);
handlebars.js
Data:
{
  "foo": []
}
Template:
{{#foo}}Ya!{{/foo}}
Result:
Source Code 
var Handlebars = require('handlebars');
var template = '{{#foo}}Ya!{{/foo}}';

var render = Handlebars.compile(template);
var data = {
  "foo": []
};
console.log(render(data));
mustache
Data:
{
  "foo": []
}
Template:
{{#foo}}Ya!{{/foo}}
Result:
Source Code 
var Mustache = require('mustache');
var template = '{{#foo}}Ya!{{/foo}}';

var data = {
  "foo": []
};
console.log(Mustache.render(template, data));

Only mustache.js will think 0 as false.

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

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

var render = Handlebars.compile(template);
var data = {
  "foo": 0
};
console.log(render(data));
mustache
Data:
{
  "foo": 0
}
Template:
{{#foo}}Ya!{{/foo}}
Result:
Source Code 
var Mustache = require('mustache');
var template = '{{#foo}}Ya!{{/foo}}';

var data = {
  "foo": 0
};
console.log(Mustache.render(template, data));

Only mustache.js will think empty string as false.

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

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

var render = Handlebars.compile(template);
var data = {
  "foo": ""
};
console.log(render(data));
mustache
Data:
{
  "foo": ""
}
Template:
{{#foo}}Ya!{{/foo}}
Result:
Source Code 
var Mustache = require('mustache');
var template = '{{#foo}}Ya!{{/foo}}';

var data = {
  "foo": ""
};
console.log(Mustache.render(template, data));

Context Switching

When rendering inner block, the context will be switched.

lightncandy

Used option: FLAG_JSOBJECT

Data:
array(
  "foo" => array(
    "foo" => "Hello",
    "bar" => "World"
  ),
  "bar" => "OK"
)
Template:
{{foo}},{{bar}}
{{#foo}}{{foo}},{{bar}}{{/foo}}
Result:
[object Object],OK
Hello,World
Source Code 
require('./vendor/autoload.php');
use LightnCandy\LightnCandy;
$template = "{{foo}},{{bar}}\n{{#foo}}{{foo}},{{bar}}{{/foo}}\n";

$php = LightnCandy::compile($template, array(
  "flags" => LightnCandy::FLAG_JSOBJECT
));
$render = LightnCandy::prepare($php);
$data = array(
  "foo" => array(
    "foo" => "Hello",
    "bar" => "World"
  ),
  "bar" => "OK"
);
echo $render($data);
handlebars.js
Data:
{
  "foo": {
    "foo": "Hello",
    "bar": "World"
  },
  "bar": "OK"
}
Template:
{{foo}},{{bar}}
{{#foo}}{{foo}},{{bar}}{{/foo}}
Result:
[object Object],OK
Hello,World
Source Code 
var Handlebars = require('handlebars');
var template = '{{foo}},{{bar}}\n{{#foo}}{{foo}},{{bar}}{{/foo}}\n';

var render = Handlebars.compile(template);
var data = {
  "foo": {
    "foo": "Hello",
    "bar": "World"
  },
  "bar": "OK"
};
console.log(render(data));
mustache
Data:
{
  "foo": {
    "foo": "Hello",
    "bar": "World"
  },
  "bar": "OK"
}
Template:
{{foo}},{{bar}}
{{#foo}}{{foo}},{{bar}}{{/foo}}
Result:
[object Object],OK
Hello,World
Source Code 
var Mustache = require('mustache');
var template = '{{foo}},{{bar}}\n{{#foo}}{{foo}},{{bar}}{{/foo}}\n';

var data = {
  "foo": {
    "foo": "Hello",
    "bar": "World"
  },
  "bar": "OK"
};
console.log(Mustache.render(template, data));

Lookup deeper value in this way.

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

$php = LightnCandy::compile($template);
$render = LightnCandy::prepare($php);
$data = array(
  "foo" => array(
    "bar" => array(
      "moo" => "MOO!"
    )
  )
);
echo $render($data);
handlebars.js
Data:
{
  "foo": {
    "bar": {
      "moo": "MOO!"
    }
  }
}
Template:
{{#foo}}{{#bar}}{{moo}}{{/bar}}{{/foo}}
Result:
MOO!
Source Code 
var Handlebars = require('handlebars');
var template = '{{#foo}}{{#bar}}{{moo}}{{/bar}}{{/foo}}';

var render = Handlebars.compile(template);
var data = {
  "foo": {
    "bar": {
      "moo": "MOO!"
    }
  }
};
console.log(render(data));
mustache
Data:
{
  "foo": {
    "bar": {
      "moo": "MOO!"
    }
  }
}
Template:
{{#foo}}{{#bar}}{{moo}}{{/bar}}{{/foo}}
Result:
MOO!
Source Code 
var Mustache = require('mustache');
var template = '{{#foo}}{{#bar}}{{moo}}{{/bar}}{{/foo}}';

var data = {
  "foo": {
    "bar": {
      "moo": "MOO!"
    }
  }
};
console.log(Mustache.render(template, data));

Loop then context switched into different items

lightncandy
Data:
array(
  "foo" => array(
    array(
      "bar" => "Yes, "
    ),
    array(
      "bar" => "hello "
    ),
    array(
      "bar" => "world."
    )
  )
)
Template:
{{#foo}}{{bar}}{{/foo}}
Result:
Yes, hello world.
Source Code 
require('./vendor/autoload.php');
use LightnCandy\LightnCandy;
$template = "{{#foo}}{{bar}}{{/foo}}";

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

var render = Handlebars.compile(template);
var data = {
  "foo": [
    {
      "bar": "Yes, "
    },
    {
      "bar": "hello "
    },
    {
      "bar": "world."
    }
  ]
};
console.log(render(data));
mustache
Data:
{
  "foo": [
    {
      "bar": "Yes, "
    },
    {
      "bar": "hello "
    },
    {
      "bar": "world."
    }
  ]
}
Template:
{{#foo}}{{bar}}{{/foo}}
Result:
Yes, hello world.
Source Code 
var Mustache = require('mustache');
var template = '{{#foo}}{{bar}}{{/foo}}';

var data = {
  "foo": [
    {
      "bar": "Yes, "
    },
    {
      "bar": "hello "
    },
    {
      "bar": "world."
    }
  ]
};
console.log(Mustache.render(template, data));

See Also...

Search the cookbook

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