0.4.0 • Published 7 years ago
handlebars.binding v0.4.0
handlebars.binding 
This is a Handlebars plugin which allows using one-way data binding inside templates with a clean markup. It saves development time by offering a simple and powerful way of building highly interactive templates without re-rendering or updating the DOM manually.
Install
$ npm install --save handlebars.binding
Usage
var Handlebars = require("handlebars");
require("handlebars.binding").default(Handlebars);
var main = document.querySelector("main");
var context = {foo: 123};
var template = Handlebars.templates["path/to/template"];
var nodes = Handlebars.parseHTML(template(context));
nodes.forEach((node) => main.appendChild(node));
context.foo = 321;
Handlebars.update();
Examples
Binding with bind
helper
<h1>{{bind "foo"}}</h1>
<h1 {{bind "foo" attr=true}}>
Hello {{foo}}, {{bar}}
</h1>
<h1 {{bind "foo" attr="class"}}>
Hello {{foo}}, {{bar}}
</h1>
{{#bind "foo"}}
<h1>Hello {{foo}}, {{bar}}</h1>
{{/bind}}
Binding with if
and unless
helper
<h1>{{if "foo" bind=true then="Hello" else="World"}}</h1>
<h1 {{if "foo" bindAttr=true then="disabled" else="enabled"}}>
Hello {{foo}}, {{bar}}
</h1>
<h1 {{if "foo" bindAttr="class" then="hello" else="goodbye"}}>
Hello {{foo}}, {{bar}}
</h1>
{{#if "foo" bind=true}}
<h1>Hello {{foo}}, {{bar}}</h1>
{{else}}
<h1>Goodbye</h1>
{{/if}}
Binding with each
helper
{{#each objects var="object" bind=true}}
<h2>Item {{index}}: {{object.name}}</h2>
<p>{{object.content}}</p>
{{/each}}
{{#each objects bind=true}}
<h2>Item {{index}}: {{name}}</h2>
<p>{{content}}</p>
{{/each}}
{{#each primitives var="primitive" bind=true}}
<h2>Item {{index}}: {{primitive}}</h2>
{{/each}}
{{#each primitives bind=true}}
<h2>Item {{index}}: {{$this}}</h2>
{{/each}}
Unbinding and rebinding DOM
Handlebars.unbind(node);
Handlebars.bind(node);
License
MIT © Mateus Maso
0.4.0
7 years ago
0.3.9
8 years ago
0.3.8
8 years ago
0.3.7
8 years ago
0.3.6
9 years ago
0.3.5
9 years ago
0.3.4
9 years ago
0.3.3
9 years ago
0.3.2
9 years ago
0.3.1
9 years ago
0.3.0
9 years ago
0.2.0
9 years ago
0.1.9
9 years ago
0.1.8
9 years ago
0.1.7
10 years ago
0.1.6
10 years ago
0.1.5
10 years ago
0.1.4
10 years ago
0.1.3
10 years ago
0.1.2
11 years ago
0.1.1
11 years ago
0.1.0
11 years ago