2.1.0 • Published 10 years ago
bindie v2.1.0
bindie 
CommonJS/Browserified simple data view binding, without magic
This is a quick and light weight vanilla JS way to data bind UI elements.
When paired with ajax forms (check out formie), provides a comprehensive data-binding ui framework without the baggage of a full framework.
Example
Check out example/index.html, the example javascript for the example page is resources/js/example_src.js
Installation
$ npm install bindieBinde is a browserified/commonjs javascript module.
Usage
JavaScript
var Bindie = require('bindie'),
myBindie;
var updateBindieData = function(){
bindie1.update({
data: {
field1: "field1 data, probably from database",
field2: {
field2html: "<h2>field2</h2><p>by default this uses EJS, you can use whatever template language you want</p>"
}
}
});
};
//initialize nav component after the dom has loaded
window.addEventListener('load',function(){
var tabelement = document.getElementById('tabs');
myBindie = new Bindie();
myBindie.addBinder({
prop: 'field1',
elementSelector: '#field1',
binderType: 'value',
binderCallback: function (cbdata) {
console.log(cbdata);
}
});
myBindie.addBinder({
prop: 'field2',
elementSelector: '#field2',
binderType: 'template',
binderTemplate: document.querySelector('#field2-template').innerHTML
});
//expose your nav component to the window global namespace
window.myBindie = myBindie;
updateBindieData();
});HTML
<html>
<head>
<title>Your Page</title>
<script src='[path/to/browserify/bundle].js'></script>
</head>
<body>
<section>
<label for="field1">Field 1</label>
<input type="text" value="" name="field1" id="field1" />
</section>
<section>
<label for="field2">Field 2</label>
<div id="field2"></div>
</section>
<script id="field2-template" type="text/template">
<div>
{{- field2html }}
</div>
</script>
</body>
</html>##API
//bind UI elements to JSON from AJAX response
myBindie.update({
data:responsefromajax
});
//bind UI elements to JSON from AJAX response
myBindie.addBinder({
elementSelector:responsefromajax,
binderType: 'value' || 'innerHTML' || 'template',
binderTemplate: document.querySelector('#templatehtml').innerHTML,
binderCallback: function (cbdata) {
console.log(cbdata);
}
});
//events
myBindie.on('addedBinder',callback); // callback(binder)
myBindie.on('renderedBinder',callback); // callback(data)
myBindie.on('updatedBindie',callback); // callback(data)##Development Make sure you have grunt installed
$ npm install -g grunt-cliThen run grunt watch
$ grunt watch##For generating documentation
$ grunt doc
$ jsdoc2md lib/**/*.js index.js > doc/api.md##Notes
- The Tab Module uses Node's event Emitter for event handling.
- The Template Generator uses EJS, but you can generate your own mark up