1 | # [bel](https://en.wikipedia.org/wiki/Bel_(mythology))
|
2 |
|
3 | [![NPM version][npm-image]][npm-url]
|
4 | [![build status][travis-image]][travis-url]
|
5 | [![Downloads][downloads-image]][downloads-url]
|
6 | [![js-standard-style][standard-image]][standard-url]
|
7 | ![experimental][experimental-image]
|
8 |
|
9 | A simple library for composable DOM elements using [tagged template strings](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals).
|
10 |
|
11 | ## usage
|
12 |
|
13 | ### A Simple Element
|
14 |
|
15 | Create an element:
|
16 |
|
17 | ```js
|
18 | // list.js
|
19 | var $ = require('bel')
|
20 |
|
21 | module.exports = function (items) {
|
22 | return $`<ul>
|
23 | ${items.map(function (item) {
|
24 | return $`<li>${item}</li>`
|
25 | })}
|
26 | </ul>`
|
27 | }
|
28 | ```
|
29 |
|
30 | Then pass data to it and add to the DOM:
|
31 |
|
32 | ```js
|
33 | // app.js
|
34 | var createList = require('./list.js')
|
35 | var list = createList([
|
36 | 'grizzly',
|
37 | 'polar',
|
38 | 'brown'
|
39 | ])
|
40 | document.body.appendChild(list)
|
41 | ```
|
42 |
|
43 | ### Data Down, Actions Up
|
44 |
|
45 | ```js
|
46 | // list.js
|
47 | var $ = require('bel')
|
48 |
|
49 | // The DOM is built by the data passed in
|
50 | module.exports = function (items, onselected) {
|
51 | function render () {
|
52 | return $`<ul>
|
53 | ${items.map(function (item) {
|
54 | return $`<li>${button(item.id, item.label)}</li>`
|
55 | })}
|
56 | </ul>`
|
57 | }
|
58 | function button (id, label) {
|
59 | return $`<button onclick=${function () {
|
60 | // Then action gets sent up
|
61 | onselected(id)
|
62 | }}>${label}</button>`
|
63 | }
|
64 | var element = render()
|
65 | return element
|
66 | }
|
67 | ```
|
68 |
|
69 | ```js
|
70 | // app.js
|
71 | var $ = require('bel')
|
72 | var list = require('./list.js')
|
73 |
|
74 | module.exports = function (bears) {
|
75 | function onselected (id) {
|
76 | // When a bear is selected, rerender with the newly selected item
|
77 | // This will use DOM diffing to render, sending the data back down again
|
78 | element.update(render(id))
|
79 | }
|
80 | function render (selected) {
|
81 | return $`<div className="app">
|
82 | <h1>Selected: ${selected}</h1>
|
83 | ${list(bears, onselected)}
|
84 | </div>`
|
85 | }
|
86 | // On first render, we haven't selected anything
|
87 | var element = render('none')
|
88 | return element
|
89 | }
|
90 | ```
|
91 |
|
92 | ## similar projects
|
93 |
|
94 | * [vel](https://github.com/yoshuawuyts/vel)
|
95 | minimal virtual-dom library
|
96 | * [base-element](https://github.com/shama/base-element)
|
97 | An element authoring library for creating standalone and performant elements
|
98 | * [virtual-dom](https://github.com/Matt-Esch/virtual-dom)
|
99 | A Virtual DOM and diffing algorithm
|
100 |
|
101 | # license
|
102 | (c) 2016 Kyle Robinson Young. MIT License
|
103 |
|
104 | [npm-image]: https://img.shields.io/npm/v/bel.svg?style=flat-square
|
105 | [npm-url]: https://npmjs.org/package/bel
|
106 | [travis-image]: https://img.shields.io/travis/shama/bel/master.svg?style=flat-square
|
107 | [travis-url]: https://travis-ci.org/shama/bel
|
108 | [downloads-image]: http://img.shields.io/npm/dm/vel.svg?style=flat-square
|
109 | [downloads-url]: https://npmjs.org/package/bel
|
110 | [standard-image]: https://img.shields.io/badge/code%20style-standard-brightgreen.svg?style=flat-square
|
111 | [standard-url]: https://github.com/feross/standard
|
112 | [experimental-image]: https://img.shields.io/badge/stability-experimental-orange.svg?style=flat-square
|