Funky
Front-end view system using basic functional programming and template literals.
Usage
funk
| funk.view
var funk = var docview = funk` <div class="container"> </div>` documentbody
The funk
and funk.view
are function handlers for string template literals.
The return value is a function.
When called this function returns a DOM element with some properties added. Any variables passed to the view function are passed to every function in the template literal and the element will use the return values from those functions.
element.update()
var funk = var docview = funk` <div class="container" id=""> </div>` documentbody var element = documentbody // Update content 3 seconds after adding to DOM.
DOM elements created by funky views have a method attached named update
. This
function is used to update the element with new values as if they had been
passed to the original view creation.
Below the surface this uses
yo-yo.update
which uses efficient DOM diffing.
funk.list
List views are designed to operate almost exactly like regular JavaScript Arrays except when items are removed, added, or re-ordered, new views are rendered to the DOM.
var simpleview = funk` <div class="container"> </div>`var list = funkdocumentbody
The list.node
property is the DOM node that can be attached.
List views can also directly be passed into other views.
var simpleview = funk` <div class="container"> </div>`var list = funkvar listContainer = funk`<div id="></div>`'list-container'documentbody