https://github.com/mateusmaso/handlebars.binding
Handlebars plugin for using one-way data binding
https://github.com/mateusmaso/handlebars.binding
data-binding handlebars javascript
Last synced: 12 months ago
JSON representation
Handlebars plugin for using one-way data binding
- Host: GitHub
- URL: https://github.com/mateusmaso/handlebars.binding
- Owner: mateusmaso
- License: mit
- Created: 2013-12-12T07:29:15.000Z (over 12 years ago)
- Default Branch: master
- Last Pushed: 2018-02-04T20:55:52.000Z (about 8 years ago)
- Last Synced: 2024-04-14T12:35:51.875Z (almost 2 years ago)
- Topics: data-binding, handlebars, javascript
- Language: JavaScript
- Homepage:
- Size: 260 KB
- Stars: 29
- Watchers: 3
- Forks: 4
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE.txt
Awesome Lists containing this project
README
handlebars.binding [](https://travis-ci.org/mateusmaso/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
```javascript
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
```html
{{bind "foo"}}
Hello {{foo}}, {{bar}}
Hello {{foo}}, {{bar}}
{{#bind "foo"}}
Hello {{foo}}, {{bar}}
{{/bind}}
```
### Binding with ```if``` and ```unless``` helper
```html
{{if "foo" bind=true then="Hello" else="World"}}
Hello {{foo}}, {{bar}}
Hello {{foo}}, {{bar}}
{{#if "foo" bind=true}}
Hello {{foo}}, {{bar}}
{{else}}
Goodbye
{{/if}}
```
### Binding with ```each``` helper
```html
{{#each objects var="object" bind=true}}
Item {{index}}: {{object.name}}
{{object.content}}
{{/each}}
{{#each objects bind=true}}
Item {{index}}: {{name}}
{{content}}
{{/each}}
{{#each primitives var="primitive" bind=true}}
Item {{index}}: {{primitive}}
{{/each}}
{{#each primitives bind=true}}
Item {{index}}: {{$this}}
{{/each}}
```
### Unbinding and rebinding DOM
```javascript
Handlebars.unbind(node);
Handlebars.bind(node);
```
## License
MIT © [Mateus Maso](http://www.mateusmaso.com)