bee-js

    1.0.2 • Public • Published

    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 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);
        }
    });

    Start Bee on DOM ready

    // jQuery
    jQuery(document).ready(function($){
        bee.init(document);
    });
     
    // Mootools
    window.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" callback
    datatable.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.

    Install

    npm i bee-js

    DownloadsWeekly Downloads

    9

    Version

    1.0.2

    License

    MIT

    Last publish

    Collaborators

    • paulschwarz