A simple library for composable DOM elements using tagged template strings.
usage
For a more in depth tutorial on getting started, please check out the wiki.
A Simple Element
Create an element:
var bel = require('bel')
module.exports = function (items) {
return bel`<ul>
${items.map(function (item) {
return bel`<li>${item}</li>`
})}
</ul>`
}
Then pass data to it and add to the DOM:
var createList = require('./list.js')
var list = createList([
'grizzly',
'polar',
'brown'
])
document.body.appendChild(list)
Data Down, Actions Up
var bel = require('bel')
module.exports = function (items, onselected) {
function render () {
return bel`<ul>
${items.map(function (item) {
return bel`<li>${button(item.id, item.label)}</li>`
})}
</ul>`
}
function button (id, label) {
return bel`<button onclick=${function () {
// Then action gets sent up
onselected(id)
}}>${label}</button>`
}
var element = render()
return element
}
var bel = require('bel')
var morphdom = require('morphdom')
var list = require('./list.js')
module.exports = function (bears) {
function onselected (id) {
morphdom(element, render(id))
}
function render (selected) {
return bel`<div className="app">
<h1>Selected: ${selected}</h1>
${list(bears, onselected)}
</div>`
}
var element = render('none')
return element
}
use with/without hyperx
hyperx
is built into bel
but there may be times when you wish to use your
own version or implementation of hyperx
. Or if you prefer to create elements
using bel
without using tagged template literals:
var createElement = require('bel').createElement
var hyperx = require('hyperx')
var bel = hyperx(createElement)
var element = bel`<div class="heading">Hello!</div>`
var sameElement = createElement('div', { className: 'heading' }, ['Hello!'])
similar projects
- vel
minimal virtual-dom library - base-element
An element authoring library for creating standalone and performant elements - virtual-dom
A Virtual DOM and diffing algorithm - hyperscript
Create HyperText with JavaScript.
license
(c) 2016 Kyle Robinson Young. MIT License