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;
},
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) }]
])
);
}
}));
Using refs and lifecycles
P.View('TestView', () => ({
loaded () {
console.log(this.refs.username.value)
},
render () {
return P('div', [
P('input', { ref: 'username', type: 'text', value: 'Alice' })
])
}
}))