Including an element
Reference an includable by id, either statically with #element-id or through a data-key holding
the id. Below, one list item template renders three different menus, each scoped to its own context.
<li id="mealItem" b-includable b-repeat="items">
<span b-value="name"></span> <span b-value="price"></span>
</li>
<div b-context="demo.include">
<h3>Breakfast</h3>
<ul b-context="breakfast" b-include="#mealItem"></ul>
<h3>Lunch</h3>
<ul b-context="lunch" b-include="#mealItem"></ul>
</div>
$bindary.appData.demo.include = {
breakfast: { items: [ { name: "Pancakes", price: 4.00 },
{ name: "Bacon and eggs", price: 4.75 } ] },
lunch: { items: [ { name: "Tomato soup", price: 3.50 },
{ name: "Croque Monsieur", price: 5.00 } ] }
};
Result
The template is written once and knows nothing about breakfast or lunch. What differs is the context on each
ul, which is what the keys inside the template resolve against.