Bee is for behavior binding.
Ultra-lightweight framework for declaratively binding Javascript behavior to the DOM via HTML.
Grab the latest build, it's only about 1KB!
Include the Bee library in the <head>. It adds the bee to the window global namespace.
// Pure JS
bee.filter('greeter', {
create: function(element, options){
return new Greeter(element, options);
}
});
// jQuery UI
bee.filter('jqueryui', {
datepicker: function(element, options){
return $(element).datepicker(options);
}
});// jQuery
jQuery(document).ready(function($){
bee.init(document);
});
// Mootools
window.addEvent('domready', function(){
bee.init(document);
});<!-- 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"
}'>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" callback
datatable.load('/data.html?page=2', function(){
bee.init(datatable); // bind new content
});- 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.