This is pretty rough around the edges. Anyway, here's the deal.
Dancer is a parasitic web framework. It does not attempt to be a web framework
in its own right, but rather to piggyback on what some other web framework is
doing. It achieves this by using the MutationObserver
class to watch when nodes
are added or removed from the DOM and when classes are added and removed from an
element.
The idea is to use this when you simply do not have access to the execution context of another framework, but you can see the DOM. For example, this is the case when implementing a Chrome plugin.
init
-> attach
-> detach
-> destroy
init
fires when a class is attached to an elementattach
fires when a component is attached to the DOMdetach
fires when a component is removed from the DOMdestroy
fires when a class is removed from an element
These lifecycle events do not receive arguments. this
is set to the
Dancer object. If you use es6 you should take care to use
function(){}
syntax and not ()=>{}
syntax as this will bind this
to the wrong value.
init
and attach
fire in order if a new element is attached with a class.
detach
and destroy
fire in order if a class is removed from an attached component.
Dancer matches on classes for the moment. You must register a component for each class and no DOM node should have two of these classes at the same time. You can use the lifecycle methods to react when the underlying web app creates something.
attribute
fires with the name of an attribute and its new value, if an attribute is changed.
The class attribute is currently filtered out, as is dancerid
.
Dancer.observe(document.body);
Dancer.register("honk", {
attach: function() { this.element.style.backgroundColor = "green"; },
detach: function() { this.element.style.backgroundColor = "initial"; },
honk: function() { console.log("honk!"); },
});
var element = document.querySelector(".honk");
var honk = Dancer.for(element);
honk.honk();