Skip to content
master
Switch branches/tags
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
src
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Excellent.js

Excellent!

Basic DOM Component Framework

Build Status Coverage Status Join Chat

If you like VanillaJS, and working with DOM directly, this tiny (3Kb gzip) library helps with organizing your code into reusable components. See WiKi for details.


You get the essential element-to-controllers bindings:

<div e-bind="awesome, twinkling, message"></div>

That gives your code isolation and reusability (see the plunker):

app.addController('message', function(ctrl) {
    // this = ctrl
    // this.node = your DOM element, to work with directly;
    this.node.innerHTML = 'Awesome twinkling message :)';
});

app.addController('awesome', function(ctrl) {
    this.node.className = 'green-box';
});

app.addController('twinkling', function(ctrl) {
  var s = this.node.style, a = -0.01;
  setInterval(function() {
    a = (s.opacity < 0 || s.opacity > 1) ? -a : a;
    s.opacity = +s.opacity + a;
  }, 20);
});

Such controllers can easily find each other, either among children, with EController.find and EController.findOne, or globally, with ERoot.find and ERoot.findOne, and access methods and properties in found controllers directly:

app.addController('myCtrl', function(ctrl) {
    // this = ctrl

    this.onInit = function() {
        // find one child controller, and call its method:
        ctrl.findOne('childCtrl').someMethod();

        // find some global controllers, and call a method:
        app.find('globCtrl').forEach(function(c) {
            c.someMethod();
        });
    };
});

Or you can alias + configure controllers at the same time (method addAlias), without any search.

Other features include:

  • Global and local dynamic bindings, with ERoot.bind and EController.bind.
  • Controllers can extend / inherit each other's functionality, see Inheritance.
  • Native ES6 classes can be optionally used as controllers, see Classes.
  • Modules offer greater reusability and simpler distribution of controllers.
  • Services share functionality across all controllers.
  • TypeScript support right out of the box.

You can create whole libraries of reusable components that will work with any UI framework, or on their own.

Quick Links:  Examples  |  WiKi  |  API