DataBind

DataBind is a simple javascript function that facilitates binding Data from a JSON object to a HTML template. The objective of this script is to enable using templates without introducing any new or invalid syntax and without dictating the way you structure your application. All you need is a single function. You can copy and paste it or download the file.

Easy Guide to DataBind

Elements Used in this example:

JSON:

var blog = {

"Id" : 1,

"Title": "My Programming Blog",

"Posts": [

{

"Id" : 1,

"Text" : "This is my first post in this blog. Stay tunned i will post many more",

"Comments": [

{

"Id": 1,

"Text": "This Blog Is boring"

},

{

"Id": 2,

"Text": "When are you going to post again?"

}

]

}

]

}

Template:

This blog contains posts.

There are comments for this post.

HTML Page

<script> var template = document.getElementById("BlogTemplate"); document.getElementById("ProgrammingBlog").innerHTML += DataBind(template, blog); </script>

Result:

My Programming Blog

This blog contains 1 posts.

This is my first post in this blog. Stay tunned i will post many more

There are 2 comments for this post.

This Blog Is boring

When are you going to post again?

HTML Result:

My Programming Blog

This blog contains 1 posts.

This is my first post in this blog. Stay tunned i will post many more

There are 2 comments for this post.

This Blog Is boring

When are you going to post again?

DataBind Function:

The function takes two arguments HTMLElement containing the template and JSON object.

Function returns Data Bound HTML.

The return HTML can be added to any section of the page.

Building Templates

The template can be inside a hidden HTML are element such as div, section, span, etc. It also cab be in a separate file and imported at runtime using AJAX. The objective of the scrip was to not interfere with your application structure so the way you load the template data and JSON data is totally up to you, the script just binds them together. The elements of the template which need to display data should have an attribute starting (data- ) which is HTML 5 standard.

The syntax is:

data- = "Data Key Name from the JSON Object"

ex: data-text="BlogText", data-id="BlogId", data-alt="AvatarDescription", data-src="AvatarUrl", etc

**Every attribute can be set.

Sometimes a JSON object contains an array of elements, other objects or array of other objects. Inheritance is not a problem for DataBind. Please see example to see how inheritance is handled.