can-hyperscript
Create HyperText with JavaScript and CanJS live binding.
This is an experimental library and all APIs are subject to change. Feedback is welcome - feel free to open issues with suggestions and feature requests.
What is HyperScript
HyperScript is a way to create HyperText (the HT in HTML) with JavaScript. It looks something like this:
; ;
Use with CanJS Observables
can-hyperscript allows you to use HyperScript with live-binding to CanJS observables.
can-compute
If a compute is passed as an attribute or child node, can-view-live will be used to update the HTML when the value of the compute changes.
;; const message = ;const headerClass = ;const frag = ; fragouterHTML; // <h1 class="big-h1">Hello, World!</h1> ;; fragouterHTML; // <h1 class="bigger-h1">Hello, Mars!</h1>
Map / DefineMap
To use with other CanJS observable types, you can pass a function as an attribute or child node (this example is using arrow functions). These functions will be turned into computes:
;; const data = message: 'World' class: 'big-h1';const frag = ; fragouterHTML; // <h1 class="big-h1">Hello, World!</h1> dataclass = 'bigger-h1';datamessage = 'Mars'; fragouterHTML; // <h1 class="bigger-h1">Hello, Mars!</h1>
Use with CanJS Components
can-hyperscript provides a few helpers to make working with can-components simple.
render
can-hyperscript/lib/component
provides a render
function for rendering the view for a component. This render function will take the Scope of the component, turn it in to an object, and pass it to your view function. You can use properties from the object in your view function using normal bracket or dot-notation.
;;;; const ViewModel = DefineMap; const view = { return ;}; Component;
hyperComponents mixin
There is also a mixin available to allow you to render can-component
s using hyperscript:
;; const h = ; documentbody;