Pivot.js is a super lite-weight library for creating DOM structure with javascript.
Basic usage
Register a view
P.View('TestView', () => ({
render() {
return P('div', { class: 'test-view' }, [
P('h1', 'Hello World!'),
P('ul', [
P('li', 'hello'),
P('li', 'world')
])
]);
}
}));
Insert a view into DOM
document.body.append(P('TestView').dom);
This will create a structure like this and insert it into docment.body:
<div data-pivot="TestView" class="test-view">
<h1>Hello World!</h1>
<ul>
<li>hello</li>
<li>world</li>
</ul>
</div>
You can get a normal HTMLElement by calling P('TestView').dom
Nesting another view
P.View('TestView', () => ({
render() {
return (
P('div', { class: 'test-view' }, [
P('h1', 'Hello World!'),
P('NestedView', { candies: 42 }),
P('NestedView', { candies: 1337 })
])
);
}
});
P.View('NestedView', () => ({
render() {
return P('span', this.props.candies)
}
});
This will create a structure like this:
<div data-pivot="TestView" class="test-view">
<h1>Hello World!</h1>
<span data-pivot="NestedView">42</span>
<span data-pivot="NestedView">1337</span>
</div>
Handling events
P.View('TestView', () => ({
onClickMe() {
alert('ouch');
},
render() {
return (
P('div', { class: 'test-view' }, [
P('h1', { text: 'Hello World!' }),
P('span', 'Click Me!', { '@click': () => this.onClickMe() })
])
);
}
});
Modifying states
P.View('TestView', () => ({
candies: 0,
addCandy(number) {
this.candies += number;
this.render();
},
render() {
return (
P('div', { class: 'test-view ' + this.candies ? 'enough' : 'not-enough' }, [
P('span', 'Candies: ' + this.candies),
P('button', 'Add 1', { '@click': () => this.addCandy(1) }),
P('button', 'Add 2', { '@click': () => this.addCandy(2) }]
])
);
}
});
Refs
P.View('TestView', () => ({
candies: 0,
addCandy(number) {
this.candies += number;
this.render();
},
render() {
return (
P('div', [
P('input', { ref: 'username', type: 'text' })
])
);
}
});