This is a Browserify module for building widgets with HTML templates and event delegation.
To create a widget class, you inherit from require('skyview')
or from another view.
var SkyView = require('skyview')
, inherits = require('util').inherits
function Dialog(opts) {
SkyView.call(this, opts)
this.clicks = 0
}
inherits(Dialog, SkyView)
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.
Dialog.prototype.View
( '<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.
.on(
{ ".dialog-close click": "onClick"
, ".dialog-close mousedown":
function() {
console.log("closing soon")
}
, "dblclick": "onDoubleClick"
})
The given function will be called when the Dialog is destroyed.
.destroy(function() {
console.log("destroying", this)
})
Every SkyView needs a render()
method, which attaches this.el
to the DOM.
Dialog.prototype.render = function() {
document.body.appendChild(this.el)
}
Implement the event handlers.
Dialog.prototype.onClick = function(event) {
console.log("you clicked the close button", event)
this.destroy()
}
Dialog.prototype.onDoubleClick = function() {
console.log("you double-clicked on the dialog", ++this.clicks, "times")
}
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 = new Dialog(
{ title: "<h1>The title</h1>"
, body: "some content"
})
dialog.el // div.dialog
dialog.title // 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.destroy()
Views can inherit from one another.
function LoudDialog(label) {
Dialog.call(this,
{ title: "loud dialog title"
, label: label
})
}
inherits(LoudDialog, 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.
LoudDialog.prototype.View({body: '<strong:content>{label}</strong>'})
var loud = new LoudDialog("go away")
loud.content.tagName // "STRONG"
loud.remove()