skyview
This is a Browserify module for building widgets with HTML templates and event delegation.
Example
To create a widget class, you inherit from require('skyview')
or from another view.
var SkyView = inherits = inherits { SkyView thisclicks = 0}
Define the template. Substitutions are {field}
, in this case {title}
and {body}
. :title
indicates that that element should be attached
to the Dialog – it will be available as this.title
once the
element is rendered.
DialogprototypeView '<div class="dialog">'+ '<button class="dialog-close">close</button>'+ '<div:title class="dialog-title">{title}</div>'+ '<div class="dialog-body">{body}</div>'+ '</div>'
Attach events using event delegation. For example, when an element matching
.dialog-close
within this.el
is clicked, this.onClick
will be called
with the event.
The given function will be called when the Dialog is destroyed.
Every SkyView needs a render()
method, which attaches this.el
to the DOM.
Dialogprototype { documentbody}
Implement the event handlers.
Dialogprototype { console this} Dialogprototype { console}
When a Dialog
is initialized, the template is filled, an element is created,
render
is called to add it to the DOM, and appropriate the event listeners
are attached (using event delegation).
var dialog = title: "<h1>The title</h1>" body: "some content" dialogel // div.dialogdialogtitle // div.dialog-title
SkyView#destroy
removes the element and cleans up, calling the destroy()
listeners.
Alternatively, there is a remove()
method that only detaches the element from the DOM.
dialog
Views can inherit from one another.
{ Dialog}
Fill the body
field of the Dialog template with a new template.
Any event handlers or destroy()
listeners added here will be in addition to
the ones defined on Dialog.
LoudDialogprototype var loud = "go away"loudcontenttagName // "STRONG"loud