jiggliemon / blocks

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

• Block

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:

1. key {String} child container reference
2. 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

1. 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')