jQuery: simpleBind, a simple way to bind DOM element values

April 18th, 2009 by jeremychone

SimpleBind Source on GitHub (License free: use as you want, attribute as you feel, modify as you can).

I did not find a data binding javascript library that fit my need, so, I created one. The idea is to easily bind Dom UI values together.

Usage:

$(selector).simpleBind(bindName);

$.fn.simpleBind.unbind(bindName); //to unbind all the elements for this bindName

Example:

Click on Test to start the binding, and then, type in the fields.
<ul>
	<li><input class="companyName" type="text" value="CompanyName"></li>
	<li class="companyName">Test (this will be erased with the
 first value on simpleBind)</li>
	<li class="companyName">Test2 (this too)</li>
	<li class="companyName"></li>
	<li><input class="companyName" type="text"></li>
	<li class="planName">plan 1</li>
	<li ><input class="planName" type="text" value=""></li>
	<li class="planName">plan 2</li>
</ul>
<input type="button" onclick="testSimple(event)" value="Test" />

And here the JavaScript code. Obviously, usually, you will bind onLoad, but it was to show how the system works.

<script type="application/javascript">
	function testSimple(event){
		$(".companyName").simpleBind("companyName");
		$(".planName").simpleBind("planName");
	}
</script>

Leave a Reply