component

A base component for UI components.

Wish: Take some action when an attribute changes.

✅ Like so:

var aComponent = new Component({
    el: $('<p id="turtles">Teenage Mutant Ninja Turtles</p>')
});

$(document.body).append(aComponent);

aComponent.onAttributeChange('name', function(newValue) {

        console.log('Name attr changed')
        console.log('The new value is', newValue);

});

aComponent.el.attr('name', 'sa');

Wish: Assign a state to a component. Take some action when the state changes.

✅ Like so:

var aComponent = new Component({
    state: 'Shredder',
    el: $('<p id="turtles">Teenage Mutant Ninja Turtles</p>'),
    stateChange : function(oldState, newState) {
        // Do something based on the previous or new state.
    }
});