FComponent is a small arhitecture framework for creating litte simple blocks. It may be usefull for simple integration to you MV* framework. For example backbone.
register blocks
block- Object of custom block definition. Block must haveaddanddestroymethods, otherwise methodaddthrows Error. You can also definenameof block or pass it as second param.
Type: Object {add:function(){}, destroy: function(){}}name- name of block
Type: String
Default:block.nameExample:
var sblocks = require("simple-blocks")();
sblocks.add({
init: function($el, message){
$el.html("<p>" + message + "</p>");
},
destroy: function($el){
$el.empty();
}
}, "test");Initialize all register blocks in $root DOM element
$root- dom element where find blocks
Type: jQuery DOM objectarguments- additional params for initialize block
Example:
Define block in html
<body>
<div
data-sblock="test"
data-test="Hello block" />
<div
data-sblock="test"
data-test="Hello block" />
</body>Initialize all blocks in body
var $ = require("jquery");
var sblocks = require("simple-blocks")();
sblocks.init($("body"));Result html is:
<body>
<div
data-sblock="test"
data-sblock-test
data-test="Hello block">
<p>Hello block</p>
</div>
<div
data-sblock="test"
data-sblock-test
data-test="Hello block2">
<p>Hello block2</p>
</div>
</body>Method to init not marked html element as block
name- name of using block$el- DOM elementoptions- options for initialize blockarguments- additional params for initialize block
Example:
var $ = require("jquery");
var sblock = require("simple-blocks")();
var $el = $('<div>');
$("body").append($el);
sblock.item("test", $el, "Hello block 3");html dom result:
<body>
<div
data-sblock="test"
data-sblock-test
data-test="Hello block">
<p>Hello block</p>
</div>
<div
data-sblock="test"
data-sblock-test
data-test="Hello block2">
<p>Hello block2</p>
</div>
<div
data-sblock="test"
data-sblock-test>
<p>Hello block3</p>
</div>
</body>Destroy all initialize blocks in $root DOM element
$root- dom element where find blocks
Type: jQuery DOM object
Example:
var $ = require("jquery");
var sblocks = require("simple-blocks")();
sblocks.destroy($("body"));Call custom api for block
name- name of blockfuncname- name of callable function$el- element where find dom element for initialize blocksarguments- additional params
Example:
sblocks.add({
init: function($el, val){
$el.text(val || 0)
},
destroy: function($el){
$el.empty();
},
api: {
val: function($el, val){
$el.text(val || 0);
}
}
}, "test");
/* after initializing apply method `api.val` to `$el` */
$el.text() === "0"; //true
sblocks.api("test", "val", $el, 2);
$el.text() === "2"; //truehtml dom result:
<body>
<div
data-sblock="test"
data-test="Hello block"/>
<div
data-sblock="test"
data-test="Hello block2"/>
<div data-sblock="test"/>
</body>View = Backbone.View.extend({
render: function(){
sblocks.init(this.$el);
},
remove: function(){
sblocks.destroy(this.$el);
Backbone.View.prototype.remove.call(this);
}
});- 0.0.2 - bug fixing
- 0.0.1 - public version