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.
