Bee
Bee is for behavior binding.
Ultra-lightweight framework for declaratively binding Javascript behavior to the DOM via HTML.
Getting Started
Download
Grab the latest build, it's only about 1KB!
In your HTML
Include the Bee library in the <head>. It adds the bee to the window global namespace.
Register all your filters
// Pure JSbee.filter('greeter', { create: function(element, options){ return new Greeter(element, options); }}); // jQuery UIbee.filter('jqueryui', { datepicker: function(element, options){ return $(element).datepicker(options); }});Start Bee on DOM ready
// jQueryjQuery(document).ready(function($){ bee.init(document);}); // Mootoolswindow.addEvent('domready', function(){ bee.init(document);});Now use it
<!-- A basic example without options --><div data-bee=jqueryui-datepicker></div> <!-- An example with options --><div data-bee=jqueryui-datepicker data-bee-opts-jqueryui-datepicker='{ "showAnim": "slideDown" }'></div> <!-- A non jQuery UI example --><!-- Note that the "greeter" is something you'd implement --><span data-bee=greeter data-bee-opts-greeter='{ "format": "Hello, {{firstname}} {{lastname}}", "firstname": "Paul", "lastname": "Schwarz" }'>With Ajax
When you replace section of your page with ajax, bindings need a little management.
Once the new content is added to the DOM, use the bee.init.
// On page load, just bind the whole thing.$(function{ bee.init(document);}); // Using jQuery's load method, we add a "complete" callbackdatatable.load('/data.html?page=2', function(){ bee.init(datatable); // bind new content});Todo
- Improve usage and examples.
- Allow extension and then provide builds for popular JS frameworks like jQuery and Mootools.
- Set up proper testing.
- Discuss merits of the querySelectorAll method.
- Support IE < 8.
- Rationale (encapsulation, simplification of markup, quality of code, maintainability).
- Metrics (in terms of performance, lines of code saved).
- Credit prior art.