Bind.js

Bind.js is a Light Dynamic Template Engine(Template Processor) by JavaScript.
Model(JSON) is bound to View(HTML).
Modifications of Model dynamically reflect View.

You can use this library by only including bind.js.

Examples

1. The Simplest Example

1.1 Inputs

Bind.js needs three inputs: Template, Data and Directive.

Template is View.
It is written in pure HTML.

Data is written in JSON.
Binds.js parse a JSON and generate a Model.
Model in Bind.js has setter and getter. 1.3 Modification and 1.4 Reading are the examples of them.

Directive is a assignment Rule.
It describes wchich model is buond to where of DOM.

Bind.js allows to separate Designer's work, Server side engineer's one and Client side engineer's one.
Template is a Designer's work.
Data is a Server side engineer's work.
Directive is a Client side engineer's work.

Followings are sample codes of inputs.

Template

<div id="template">
	<p id="selector">Initial Text</p>
</div>

Data

var data = {
	"text": "First Bound Text"
};

Directive

var directive = {
	"#selector": "text"
};

1.2 Rendering

A following code transforms Data(JSON) in Template(HTML).
Additionally, you will get a bound data as "binds".

Code

var binds = $b.render(
	"#template",
	data,
	directive
);

Result of Rendering

<div id="template">
	<p id="selector">First Bound Text</p>
</div>

1.3 Modification (setter)

Modifications of Model dynamically reflrect View.

Code

binds.data.text("Modified Text!");

Result of Modification

<div id="template">
	<p id="selector">Modified Text!</p>
</div>

1.4 Reading (getter)

binds.data.text();  // "Modified Text!" is returned

---

2. Array Example

This Example is included in this project.
Please check examples/array.

2.1 Inputs

Template

<ul id="comments">
    <li>
        <p class="body">Comment</p>
        <p class="author">Posted by <span>Author</span></p>
    </li>
</ul>

Data

var data = {
	"comments": [
		{
			"body": "Comment Test0",
			"author": "Mikoto Okumura"
		},
		{
			"body": "Comment Test1",
			"author": "Taro Tanaka"
		},
		{
			"body": "Comment Test2",
			"author": "Hanako Suzuki"
		}
	]
};

Directive

Bind.js supports a loop directive.

var directive = {	
    "li":{
        "comment<-comments":{
            ".body": "comment.body",
            ".author span": "comment.author"
        }
    }
};

2.2 Rendering

Code

var binds = $b.render(
	"#comments",
	data,
	directive
);

Result of Rendering

<ul id="comments">
    <li>
        <p class="body">Comment Test0</p>
        <p class="author">Posted by <span>Mikoto Okumura</span></p>
    </li>
    <li>
        <p class="body">Comment Test1</p>
        <p class="author">Posted by <span>Taro Tanaka</span></p>
    </li>
    <li>
        <p class="body">Comment Test2</p>
        <p class="author">Posted by <span>Hanako Suzuki</span></p>
    </li>
</ul>

2.4 Pushing New Comment Data

Code

binds.data.comments.push(
    {
        body: "New Comment",
        author: "Guest"
    }
);

Result of Pushing

<ul id="comments">
    <li>
        <p class="body">Comment Test0</p>
        <p class="author">Posted by <span>Mikoto Okumura</span></p>
    </li>
    <li>
        <p class="body">Comment Test1</p>
        <p class="author">Posted by <span>Taro Tanaka</span></p>
    </li>
    <li>
        <p class="body">Comment Test2</p>
        <p class="author">Posted by <span>Hanako Suzuki</span></p>
    </li>
    <li>
        <p class="body">New Comment</p>
        <p class="author">Posted by <span>Guest</span></p>
    </li>
</ul>

2.5 Removing Data

Array Model supports remove(index) method which removes an element specified index.

Code

var length = binds.data.comments().length;
binds.data.comments.remove(length-1); // last element and DOM is removed.

Result of Pushing

<ul id="comments">
    <li>
        <p class="body">Comment Test0</p>
        <p class="author">Posted by <span>Mikoto Okumura</span></p>
    </li>
    <li>
        <p class="body">Comment Test1</p>
        <p class="author">Posted by <span>Taro Tanaka</span></p>
    </li>
    <li>
        <p class="body">Comment Test2</p>
        <p class="author">Posted by <span>Hanako Suzuki</span></p>
    </li>
    <li>
        <p class="body">New Comment</p>
        <p class="author">Posted by <span>Guest</span></p>
    </li>
</ul>

2.6 Reading

Array Getter

binds.data.comments(); // A whole array is returned. It is just an array not Model.

Element in Array Getter

var e1 = binds.data.comments(1); // An element indexed by 1 is returned. It is a Model.
e1(); // {body: "Comment Test0", author: "Taro"} is returned. It is just an Object.
e1({body: "Modified Commet"}); // body property is modified. Ofcourse, DOM is modified too.

2.7 Reseting Data

Array Model has a getter which accepts array data.

binds.data.comments(data); // data is an original data which is passed to a render function.

3. Object Example

3.1 Inputs

Template

<div id="template">
	<p id="selector">Initial Text</p>
</div>

Data

var data = {
	"obj" {
        "x": "This is obj.x",
        "y": "This is obj.y"
    }
};

Directive

var directive = {
	"#selector1": "obj.x",
	"#selector2": "obj.y"
};

3.2 Rendering

A following code transforms Data(JSON) in Template(HTML).
Additionally, you will get a bound data as "binds".

Code

var binds = $b.render(
	"#template",
	data,
	directive
);

Result of Rendering

<div id="template">
	<p id="selector1">This is a obj.x</p>
	<p id="selector2">This is a obj.y</p>
</div>

3.3 Modification

Object Model Like Object

Object Model obj has a child x (and y).

binds.data.obj.x("Modified Text!");  // obj.x is modified.

Object Setter

Object Model obj has a child x (and y).

binds.data.obj({x: "Modified Text!"});  // Only obj.x is modified. obj.y does not effected.

3.4 Reading (getter)

binds.data.obj();  // An Object is returned. It is just an Object not Model.
binds.data.obj.y() // "This is a obj.y" is returned.

##Supporting Types

Bind.js supports following type as Data

• Primitive Types
• String
• Object
• Array

Bind.js supports following Directives

• Plain i.e) "x"
• Object Path i.e) "obj.x"
• Loop i.e) "x<-xs"
• Function i.e) function(binder) { ... }

##References

Bind.js references PURE.
For example, specifications of Directive are similar. Please see this document about Directive.

---

© 2013 Mikoto Okumura