Generic Data Binder v1.3.0

About GDB

Generic Data Binder (GDB) for jQuery is a framework agnostic and extremely easy to use 2 way data binder. GDB binds views and models in realtime with live two-way binding and no hefty framework necessary.

Why Use GDB?

GDB is a simple to use, zero configuration (unless you want to), template engine and framework agnostic little plugin. Drop it in and initialize it. It just works. Updates to the model automagically update the view and changes in the view automagically update the model. Finally, a plugin that allows for bi-directional live bindings between your view and model without the need to learn a hefty framework or change your current work flow.

The GDB Advantage

• Works on all element types including contenteditable elements.
• Works with very complex models, even circular structures.
• Template engine agnostic. Use your favorite client side template engine. Don't compromise.
• Framework agnostic. Use a framework? Don't use a framework? Doesn't matter. GDB will seemlessly integrate in either situation.
• Can update in realtime. Not just onkeyup, but as you type it. Works with context menu options such as cut, paste, and delete.
• Currently 3.77KB when gzipped and minified.
• Updates to elements, immediately update the model.
• Updates to the model, immediately update the bound and watching elements.

Example Usage

HTML or Template File

<span data-bindto="teacher.name" contenteditable="true" > Ms. Trunchbull </span>

Use the "data-bindto" attribute in your templates or static HTML file and map the attribute to the location in the data model where the bound data exists. The format must be such that array indexes are specified in bracket notation (ie. "[0]") and object properties are written in dot notation (ie. ".propertyName"). Specifying object properties in backet notation (ie. "['propertyName']") will not work when the model is updated from within the code and so this is discouraged.

JavaScript

$(function(){ //GDB is only available once jQuery is ready.
  GDB({
    teacher: { 
      name: "Ms. Trunchbull" 
    } 
  }) ;
});

The above example shows the most simple implementation. GDB is initialized using the syntax

GDB( objectOfModels, objectOfUserOptions );

The first parameter is a JavaScript object literal whose properties are objects representing the data model. The second parameter is an object containing user specified options.

Using the example above the element bound to the model will update the model in realtime as the data in the element changes. Vice-versa is also true. When data in the data model is changed, the element will update accordingly automatically.

User Options

All User Options are entirely optional.

Public Instance Methods

Must be used only in GDB instances. These cannot be used statically.

Element Attributes

Browser Support

Tested in Firefox, Chrome, and IE. Works in IE 9+.

TODO

• [ ] Add CommonJS Support for Browserify
• [ ] Add TypeScript definitions
• [ ] Create complex use-case master example
• [x] Create "Generic Event Binding" capabilities
• [ ] Acheive better performance
• [x] Add simple templating functionality
• [x] Add ability to add data parsing functions
• [x] Add more and better examples
• [ ] Create pure JavaScript version if there is an interest
• [x] Upload initial stable release
• [x] Upload initial beta version

Changelog

• v1.3 - 6/8/2014 - Added Generic Event Binding functionality, a few new useful public instance methods (including instance destruction), and three new examples.
• v1.2 - 4/26/2014 - Added data parsing function abilities, new public methods, AMD support, and added more examples.
• v1.0 - 3/29/2014 - Initial Stable Release. Fixed several minor bugs and added new callback function.
• v0.8 - 3/23/2014 - Uploaded initial version.