Blocks
A Block at a glance
/*
<div bind="header" class="header">
<h1>This is the content for the header</h1>
</div>
<div bind="body" class="body">
<p> This is some content for the body</p>
</div>
*/
var Block = require('blocks/block')
var someBlock = block('some', {
template: '\
<div bind="header" class="header">\
</div>\
<div bind="body" class="body">\
</div>\
'
,children: {
header: new Block('some.header', {
template: '<h1>This is the content for the header</h1>'
})
,content: new Block({
template: '<%=this.getStringFromMethod()%>'
}, {
getStringFromMethod: function () {
return "<p> This is some content for the body</p>"
}
})
}
})
document.body.appendChild(someBlock.toElement())
Dependencies
- AMD Loader
- Yaul
- Yeah mixin
- Yate mixin
Installation
npm install blocks
Constructor API
Mixin API
- #setChild
- #getChild
- #removeChild
- #setChildren
- #getChildren
- #removeChildren
- *#getChildHtml
- *#emptyChildNode
- #attachEvents
- #bindTemplate
- *#bindElements
- *#bindChildren
- *#clearBoundElements
- #setBoundElement
- #getBoundElement | #bound
- *#getBoundElements
- #setContainer
- #getContainer
- #getUniqueId
- *#toString
- *#fillContainer
- #toElement
- #inject
* indicates it may or maynot be removed.
Block
Options:
- template {string|path}
- children {object}
- events {object}
- inject {string|element}
Basic construction
var instance = block(/* object */ {})
Construction with optional identifier
var block = require('blocks/block')
var blocks = require('blocks')
var instance = block ('some.identifier',{})
blocks.reference('some.identifier') == instance
setChild
Adds a child block.
Arguments:
- key {String} child container reference
- block {Block || Array of Blocks}
Example
var instance = block({
template: '<div class="wrapper"><b name="drop"></b></div>'
})
instance.setChild('drop', block({
template: '<h1>Hello</h1>'
})
)
instance.setChild('drop', [
block({template: '<h1>Hello Again</h1>'})
,block({template: '<p>Do you like my hat?</p>'})
])
getChild
removeChild
setChildren
getChildren
removeChildren
getChildHtml
emptyChildNode
attachEvents
bindTemplate
bindElements
bindChildren
clearBoundElements
setBoundElement
getBoundElement | #bound
setContainer
getContainer
getUniqueId
Returns the unique identifing string
for the block instance. This method is intended mostly for internal use.
Example
instance.getUniqueId() // h9s5ep2c1
fillContainer
toElement
inject
Sugar syntax for document.getElementById('some-id').appendChild(instance.toElement())
.
Arguments
- where {Element || String} Either the node reference, or the id of a DOM node of the element of which to inject the block into
Example
// with a node reference passed in
instance.inject(document.body)
// with a node ID string passed
instance.inject('some-id')