❤
npm
Sign UpSign In

simple-blocks

0.0.5 • Public • Published

Simple blocks - Frontend blocks

Build Status Bower version Coverage Status Dependency Status devDependency Status

Description

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.

API

add(block, name)

register blocks

  • block - Object of custom block definition. Block must have add and destroy methods, otherwise method add throws Error. You can also define name of block or pass it as second param.
    Type: Object {add:function(){}, destroy: function(){}}
  • name - name of block
    Type: String
    Default: block.name Example:
var sblocks = require("simple-blocks")();
sblocks.add({
  init: function($el, message){
    $el.html("<p>" + message + "</p>");
  },
  destroy: function($el){
    $el.empty();
  }
}, "test");

init($root, arguments...)

Initialize all register blocks in $root DOM element

  • $root - dom element where find blocks
    Type: jQuery DOM object
  • arguments - 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>

item(name, $el, options, arguments...)

Method to init not marked html element as block

  • name - name of using block
  • $el - DOM element
  • options - options for initialize block
  • arguments - 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($root)

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"));

api(name, funcname, $el, args...)

Call custom api for block

  • name - name of block
  • funcname - name of callable function
  • $el - element where find dom element for initialize blocks
  • arguments - 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"; //true

html dom result:

<body>
  <div 
  data-sblock="test" 
  data-test="Hello block"/>
  <div 
    data-sblock="test" 
    data-test="Hello block2"/>
  <div data-sblock="test"/>
</body>

Example of Backbone integration

View = Backbone.View.extend({
  render: function(){
    sblocks.init(this.$el);
  },
  remove: function(){
    sblocks.destroy(this.$el);
    Backbone.View.prototype.remove.call(this);
  }
});

Changelog

  • 0.0.2 - bug fixing
  • 0.0.1 - public version

Readme

Keywords

none

Package Sidebar

Install

npm i simple-blocks

Weekly Downloads

0

Version

0.0.5

License

MIT

Last publish

Collaborators

  • lexich
Try on RunKit
Report malware