Dove.js
v1.0.2
Published
Simple library to initialize components from HTML tags hierarchichally. Good for websites with various heterogenous, independent components.
Downloads
2
Readme
Dove.js
Simple library to initialize components from HTML tags hierarchichally. Good for websites with various heterogenous, independent components.
Example HTML:
<div data-component="app-component">
<h1>My App</h1>
<div class="header">
<div data-component="header-component">
<div class="logo"></div>
<div class="nav-wrapper">
<div data-component="nav-component" data-prop-nav-items="navItems"></div>
</div>
</div>
</div>
</div>
Example JS:
var NavComponent = Dove.createComponent(function(props) {
this.navItems = props.navItems;
this.render();
});
NavComponent.prototype.render = function() {
// Do something with this.navItems.
// Use whatever view library you like.
};
var HeaderComponent = Dove.createComponent(function() {
this.registerComponent('nav-component', NavComponent, true);
this.navItems = [
'nav item 1'
'nav item 2',
'nav item 3',
];
this.scanChildren();
});
var AppComponent = Dove.createComponent(function() {
this.registerComponent('header-component', HeaderComponent, true);
this.scanChildren(); // Searches this.elem for children with data-component attributes and initializes them
});
Initialize the root component
var appComponent = new AppComponent(document.getElementById('#app'));