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

Keywords

FAQs

What is bee-js?

Is bee-js well maintained?

Package last updated on 01 Nov 2016

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

bee-js

Bee

Getting Started

Download

In your HTML

Register all your filters

Start Bee on DOM ready

Now use it

With Ajax

Todo

Keywords

Related posts

Supply Chain Attack on Axios Pulls Malicious Dependency from npm

TeamPCP Compromises Telnyx Python SDK to Deliver Credential-Stealing Malware