0.4.0 • Published 7 years ago

handlebars.binding v0.4.0

Weekly downloads
4
License
MIT
Repository
github
Last release
7 years ago

handlebars.binding Build Status

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