Builder
Liberal JavaScript DOM builder
npm install builder
element = Builder(tag_name, attributes = {}, elements = [], content = '', callback)
Accepts a variable number of arguments which may be:
- Hashes of attributes
- Elements
- Strings of content
- Arrays (which can be nested) of any of the above
- Function to call, which can return any of the above
All HTML5 tag names are available as functions on the Builder object which will generate the corresponding element. For maximum readability when generating multiple elements it can be useful to call a function with Builder as the context.
# using Builder
div = Builder 'div', className: 'tasty'
ul = Builder.ul Builder.li 'Item One'
# calling a function with Builder as the context
table = (->
@table cellpadding: 0, cellspacing: 0,
@tbody(
@tr(
@td 'Cell One'
@td 'Cell Two'
)
)
).call Builder
Builder.document
If no document is present in the global scope (i.e. on Node), you can explicitly set the document element:
jsdom = require 'jsdom'
Builder = require 'builder'
window = jsdom.createWindow()
Builder.document = window.document
div = Builder.div()
Builder.$
Setting $ on Builder will make Builder return a wrapped object containing the element (i.e. a jQuery/Zepto/Ender array). Builder will always look inside these objects for the actual elements so in practice you can use them as if they were the Element objects, with the added benefit of attaching event handlers inline, etc:
Builder.$ = jQuery
list = (->
@ul @li @a('Link',href:'#').click ->
).call Builder
Backbone
To use in a Backbone project, include builder.js then:
BuilderView = Backbone.View.extend Builder
MyView = BuilderView.extend
render: ->
@el.appendChild @ul li 'Item One'
Ender
When including builder in an Ender build, it becomes available as $.builder:
div = $.builder 'div'