populate
Populate DOM elements with data
Populate has two APIs you can use. Either the Schema
api or the
bind
API. The Schema
api allows you define a schema representation
of how you will populate a group of DOM elements with data.
The bind
API allows you to embed the Schema
into the DOM as
data-bind
attributes and uses the Schema
API internally
Schema example
The idea is that you take a pair of data and DOM elements and apply a mapping from the data onto the DOM.
some link!
var Schema = var unpack = var populate = var elements = documentbody
The above mapping placed the link into the <a>
's href property
and placed the text into the <span>
's textContent.
bind example
The idea with bind is that you just bind data onto a root Element
and it will go and parse out all of the data-bind
attributes
some link!
var bind = var rootElem = document documentbody
Complex Example
The format of an object of elements allows you to populate multiple elements from a single object of data.
It also works cleanly with the result of unpack-html
.
However using unpack-html
is completely optional.
Feel free to get references to your DOM elements however
you want!
<!-- ./template.html --> I'm a nested template or something
var html = var bind = var template = // Generate an object of DOM element references to populate// You can use something other then unpack-html!var elements = var data = someText: "this is some text" someLink: "http://google.com" nested: value: "you can render nested things" name: "one" "two" "three" documentbody
Advantages
- uses functions and recursions so is both modular and composable
- optionally use data binding in your template
- Works nicely with reducibles
Installation
npm install populate
Contributors
- Raynos