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.
bind API allows you to embed the
Schema into the DOM as
data-bind attributes and uses the
Schema API internally
The idea is that you take a pair of data and DOM elements and apply a mapping from the data onto the DOM.
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
The idea with bind is that you just bind data onto a root Element
and it will go and parse out all of the
var bind =var rootElem = documentdocumentbody
The format of an object of elements allows you to populate multiple elements from a single object of data.
<!-- ./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: ""nested:value: "you can render nested things"name:"one""two""three"documentbody
npm install populate