B. Blocks & Templates - MagnusThor/BobTheBinder GitHub Wiki
##Block and templates
Blocks and templates gives you the chance to separate pieces of you applications into reusable block and/or templates. The templates of your includes your the HTML markup and DOM Associations.
Template/Block 1 (tmpl1.html)
<h1 data-bind="text:echo"></h1>
<ul data-repeat="list.take()">
<li data-bind="text:text"></li>
</ul>
Template/Block 2 (tmpl2.html)
<form>
<label>Kind:</label>
<input data-bind="value:kind"/>
<button data-bind="click:add"> Add</button>
</form>
Both template above is fetch and append into the "parent page/app" as follows
<div id="app">
<div data-template="tmpl/tmpl1.html" data-use="vm">
</div>
<hr />
<div data-template="tmpl/tmpl2.html" data-use="vm">
</div>
</div>
Currently the_ data-use_ attribute has no meaning, but when time comes you will be able to specify, pass a certain part of your model. As for now , it just uses the model bind in the "parent page/app"
Javascript code for this example
var vm = {
echo: "Hello World!",
kind: "",
list: [{ text: "Coffe" }, { text: "Beer" }],
add: function (evt) {
evt.preventDefault();
var kind =
{ text: this.kind };
this.list.push(kind);
},
};
document.addEventListener("DOMContentLoaded",
function (evt) {
Bob.apply().bind("#app", vm);
});