BindJS

BindJS is an easy implementation for data binding either bidirectional or one-way binding. BindJS helps you to focus your app logic and forget about data binding with ui dom elements with easy markup declarations:

• BindJS supports bidirectional data binding and provides simple interface to access/update app data and ui preferences.
• BindJS supports one-way data binding with binding reference feature.
• BindJS has ability to specify the mapping between app data and dom element properties.
• BindJS has ability to create app contexts and sub contexts by using bind path.
• BindJS has ability to get app contexts data as json. with this, you can also update all view doms elements in app context by passing json input.

BindJS Markups

BindJS has some predefined markups for dom elements. These markups are used for app context binding:

Markup	Description
bindjs-id	the current bind id for dom element. Based on bind ids sequence (bind path), binding context will be determined.
bindjs-value	the bind value for dom element, value will be either dom element property or attrbiute. This value will be bound to app context and will be referenced by bind id path.
bindjs-ref	This is the support for one-way data binding. This is used to reference some bound dom element with app context, if the referenced context is changed, this dom will be updated as well but not versa vice.
bindjs-map	Contains a simple map between ui dom element data and context data. For example: '0:val0|1:val1', will update dom element value with 'val0' if the context is updated with value '0' and 'val1' if it is updated with value 'val1' (mapping function support will be added to extend values mapping)

Examples

Note: More samples and descriptions will be attached.

Please consider the basic example below:

<script src="bind-js.js"></script>
<div bindjs-id="app">
	<div>
		<span>App name and version:</span>
		<b><span bindjs-id="name">test</span></b>
		<b><span bindjs-id="version">V1</span></b>
	</div>	
</div>
<br/>
<div>app json: <b><span bindjs-ref="app"></span></b></div>
<script>
	// Get bind context for app.
	var app = BindJS.context('app');

	// Update value for app.name
	app.name.val('TestApp');

	// Update value for app.version
	app.version.val('V1.1');

	// Get app context as json string.
	var appJson = app.val();
	console.log(appJson);
</script>

HTML Result:

---

App name and version: TestApp V1.1

app json: {"name":"TestApp","version":"V1.1"}

---

In above example you can see that there is some dom elements with bindjs markups. BindJS.context('app') creates new context for binding path 'app' (or dom element selector '[bindjs-id="app"]'). From html code above, you see that dom element with bindid 'app' has some descendants elements with bindjs-id, by this context 'app' will have the control for all descendants doms (name and version) so we have contexts: app, app.name and app.version.

• app is the parent context for app.name & app.value. For any context have sub contexts, the data from sub contexts will be serialized as json (also it accepts json string data).
• Data for app.name or app.version will be some dom property/attribute for the bound element (by default it is 'this.innerText' for non-input elements and 'this.value' for input elements). This is also applied for any single element context.
• The value for any single context (with no sub contexts) can be changed to some dom element property or attribute by using bindjs-value markup. (will be described later)

To get any context data, you can simple use 'val' method:

var nameVal = app.name.val() // Gets the context value for app.name, for above sample value will be el.innerText
			     // for the element with [bindjs-id='app'] [bindjs-id='name']
var versionVal = app.version.val() // Gets the context value for app.version, for above sample value will be el.innerText
				   // for the element with [bindjs-id='app'] [bindjs-id='version']
var appVal = app.val() // Gets the context value for app, for above sample value will be 
		    // {"name":app.name.val(),"version":app.version.val()}. Any context have sub contexts, its value will be
		    // serialized as a json object.

Any context data can be changed also using val method:

app.name.val('MyApp') // Changes value of context app.name to 'MyApp'. element [bindjs-id='app'] [bindjs-id='name'] value will
		      // be also updated

app.val('{"name":"MyApp2","version":"V1.3"}') // Updates value for app context by json data. All sub contexts 
					     // (app.name and app.version) will be updated with data from json input.

What is next?

• Adding support to bind array data.
• Adding support for runtime doms. (Currently binding contexts are just registered for static doms in the page)
• Adding ability to bind dom events with app context.

Thank you!