Bemodeler — Data store for i-bem.js
🇷🇺 Bemodeler — Хранилище данных для i-bem.js
BEM — is methodology for effective web-development. More information at http://ru.bem.info.
I-bem.js — is library for writting client side JavaScript with BEM.
Bemodeler
— is extension for i-bem
, which realizing ability to store data of block in separate place and ability to declaration this data in simple models.
bower install bemodeler
For working bemodeler
requires i-bem
, which in turn requires jquery
.
After install bemodeler
from bower
by dependencies will be installed the latest version of i-bem
and jquery
.
Group of abovementioned technologies working only in browser, where should be include all three libraries in the following order:
<script src="bower_components/jquery/dist/jquery.min.js"></script>
<script src="bower_components/i-bem/i-bem.min.js"></script>
<script src="bower_components/bemodeler/bemodeler.min.js"></script>
Bemodeler
adds method model
in this
each block.
This method accepts one or two parameters depending on what gets or sets the value for specified field in the model.
For example, let's take arbitrary block:
BEM.decl('block', {});
var block = BEM.create('block');
Now lets's add to received instance of the block in the model property greeter
with the value hello world
:
block.model('greeter', 'hello world'); // → block
After call with two parameters, method model
returns block, for ability write the call chain.
Now values of property greeter
stored in bemodeler
and we can get it by calling the method model
with one parameter:
block.model('greeter'); // → 'hello world'
Models declared similarly as block in i-bem
:
BEM.decl('block', {});
BEM.model('block', {});
Model always should be declared in scope BEM
even if block was declared in scope BEM.DOM
:
BEM.DOM.decl('button', {});
BEM.model('button', {});
To declaring model for the block with modifiers bemodeler
supports syntax similar i-bem
.
Example declaration of model by the name of block modifier:
BEM.model({ block: 'component', modName: 'disabled' }, {});
Example declaration of model by the name and value of block modifier:
BEM.model({ block: 'component', modName: 'type', modVal: 'text' }, {});
Property value
used for preset the default value of data in model declaration.
Example for block component
:
BEM.decl('component', {});
Declaring property name
with preset value:
BEM.model('component', {
name: { value: 'Jhon' }
});
This value will be set for block component
by default:
BEM.create('component').model('name'); // → 'Jhon'
If you need to make certain calculations, it is possible to pass a function in the value of property value
. Context of this function will be the block:
BEM.model('component', {
name: { value: function() {
return this.__self.getName();
}}
});
BEM.create('component').model('name'); // → 'component'
For data processing when trying their getting, in model declaration you can use property get
.
Property get
takes a function, which is passed one parameter — current value of the model for the described property.
Example for block component
:
BEM.decl('component', {});
Let's declare property name
with handler on getting:
BEM.model('component', {
name: {
value: 'Steve',
get: function(value) {
return value.toUpperCase();
}
}
});
BEM.create('component').model('name'); // → 'STEVE'
For data processing when setting their values, in model declaration you can use property set
.
Property set
takes a function, which is passed two parameters:
- new value
- current value
Example for block component
:
BEM.decl('component', {});
Let's declare property count
with handler on setting value:
BEM.model('component', {
count: {
value: 30,
set: function(value, currentValue) {
return value < 100 ? value : currentValue;
}
}
});
var component = BEM.create('component');
component.model('count', 50).model('count'); // → 50
component.model('count', 150).model('count'); // → 50
Data values may be specified in property model
of JS-parameters block.
Example for block component
:
BEM.decl('component', {});
Let's declare model with property name
:
BEM.model('component', {
name: { value: 'Jhon' }
});
Let's create an instance of the block component
with specifying the values for properties of his model.
var component = BEM.create('component', { model: {
name: 'Steve'
}});
The values specified in JS-parameters of block take precedence over the values specified in declaration of model:
component.model('name'); // → 'Steve'
The field model
not available directly in the block parameters:
component.params.model; // → undefined