❤
npm
Sign UpSign In

bindie

2.1.0 • Public • Published

bindie NPM version

** 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.

API Documenation

Example

Check out example/index.html, the example javascript for the example page is resources/js/example_src.js

Installation

$ npm install bindie

Binde 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-cli

Then 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

Readme

Keywords

Package Sidebar

Install

npm i bindie

Repository

github.com/yawetse/bindie

Homepage

github.com/yawetse/bindie

Weekly Downloads

9

Version

2.1.0

License

none

Last publish

Collaborators

  • yawetse
Try on RunKit
Report malware