2. JavaScript Framework for Developers
<input type="text" class="my-input">
<script src="matreshka.min.js"></script>
<script>
var app = new Matreshka;
app.bindNode('x', '.my-input');
app.x = 'Two-way data binding in JS? O rly?';
</script>
18. Matreshka.binders.className(className)
Examples
this.bindElement('myKey', '.my-element', MK.binders.className('foo'));
// the same as
this.bindElement('myKey', '.my-element', {
setValue: function (v) {
$(this).toggleClass('foo', v);
}
});
this.myKey = true; // adds the 'foo' class
this.myKey = false; // removes the 'foo' class
this.bindElement('myKey', '.my-element', MK.binders.className('!foo'));
// the same as
this.bindElement('myKey', '.my-element', {
setValue: function (v) {
$(this).toggleClass('foo', !v);
}
});
this.myKey = false; // adds the 'foo' class
this.myKey = true; // removes the 'foo' class
19. Matreshka#set(key, value, eventOptions)
The list of the supported flags:
● silent - do not call the change and change:KEY events
● silentHTML - do not change the state of the bound objects
● force - call the change and change:KEY events even though the property value has not been changed
● forceHTML - change the state of the bound element even though the property value has not been changed. This option is
necessary if the bound element has been rendered after the binding (for example, the option tags have been added to select tag)
● skipMediator - prevents the property transformation by a mediator
● skipLinks - prevents the work of dependencies created with the help of Matreshka#linkProps
20. Matreshka#set(key, value, eventOptions)
Examples
// simple
this.on('change:myKey', function (eventOptions) {
alert(eventOptions.value);
});
this.set('myKey', 3);
// using eventOptions
this.on('change:myKey', function (eventOptions) {
alert(eventOptions.value);
});
this.set('myKey', 4, {
silent: true
});
// passing custom data
this.on('change:myKey', function (eventOptions) {
alert(eventOptions.myCustomFlag);
});
this.set('myKey', 4, {
myCustomFlag: 42
});
24. Matreshka#mediate(key, mediator)
Examples
this.mediate('x', function (s) {
return String(s);
});
this.x = 1;
alert(typeof this.x); // 'string'
// a list of keys which are separated by space
this.mediate('x y', function (s) {
return String(s);
});
// an array of keys
this.mediate([ 'x', 'y' ], function (s) {
return String(s);
});
25. Matreshka#mediate(keyMediatorPairs)
Examples
this.mediate({
x: String,
y: Number,
z: Boolean
});
this.x = 1;
this.y = 2;
this.z = 3;
alert(typeof this.x); // 'string'
alert(typeof this.y); // 'number'
alert(typeof this.z); // 'boolean'
// a list of keys which are separated by spaces
this.mediate({
'u v': String,
'w x': Number,
'y z': Boolean
});
27. Matreshka#linkProps(keys1, keys2, handler,
setOnInit=true)
Examples
this.a = 3;
this.b = 4;
this.linkProps('p', 'a b', function (a, b) {
return (a + b) * 2;
});
this.linkProps('a', 'p b', function (p, b) {
return p / 2 - b;
});
this.linkProps('b', 'p a', function (p, a) {
return p / 2 - a;
});
alert(this.p); // 14
this.on('change:p', function () {
alert('The perimeter has been changed and equals ' + this.p);
});
this.a = 5; // alerts 'The perimeter has been changed and equals 18'
30. Class Mathreska.Object
Examples
// creation of the instance
new MK.Object;
// creation of the instance with two specified properties
new MK.Object({
a: 1,
b: 2
});
// inheritance
var MyClass = Class({
'extends': MK.Object,
constructor: function() {
this.sayHello();
},
sayHello: function() {
alert('Hello World!');
}
});
31. Class Mathreska.Object
Examples
// adding the properties which are responsible for the data
this.addDataKeys('a b');
this.a = 1;
this.b = 2;
this.c = 3;
// adding the properties which are responsible for the data with the default value
this.jset({
a: 1,
b: 2
});
this.c = 3;
// in both cases will return the object {a: 1, b: 2}
this.toJSON();
35. Matreshka.Object#jset(key, value, evtOpts)
Examples
this.jset('a', 1).jset('b', 2);
this.jset('a', 1).jset('b', 2);
// assigns 3 to the 'c' property,
// but does not add the key to the list of keys which are responsible for the data
this.set('c', 3);
this.each(function (value, key) {
console.log(key, value);
});
// displays 'a' 1 and 'b' 2
console.log(this.keys()); // displays ['a', 'b']
console.log(this.toJSON()); // displays {a: 1, b: 2}
// after using the Matreshka.Object#jset method, you can work with a property like with an ordinary one
this.jset('a', 1).jset('b', 2);
this.set('a', 3);
this.b = 4;
36. Class Mathreska.Array
Examples
// creation of the instance
new MK.Array;
// creation of the instance with specify length
new MK.Array(42);
// passing data on creation
new MK.Array('Hi', {a: 'b'});
// inheritance
var MyClass = Class({
'extends': MK.Array,
constructor: function () {
this.sayHello();
},
sayHello: function () {
alert('Hello World!');
}
});
37. Class Mathreska.Array
Examples
// define Model
var MyModel = Class({
'extends': MK.Object,
constructor: function (data) {
this.jset(data);
}
});
// define the class for the collection
var MyArray = Class({
'extends': MK.Array,
Model: MyModel
});
// create the class instance
var myArray = new MyArray;
38. Class Mathreska.Array
Examples
// add two elements
myArray.push({
a: 1,
b: 2
}, {
a: 3,
b: 4
});
// will return [{a: 1, b: 2}, {a: 3, b: 4}]
myArray.toJSON();
39. Class Mathreska.Array
Examples
// automatic rendering
var MyModel = MK.Class({
'extends': MK.Object,
constructor: function (data) {
this.jset(data);
this.on('render', function () {
this.bindNode('value', ':sandbox', MK.binders.innerHTML());
});
}
});
var MyArray = MK.Class({
'extends': MK.Array,
Model: MyModel,
itemRenderer: '<li>',
constructor: function () {
this.bindNode('sandbox', '.my-list');
}
});
40. Class Mathreska.Array
● isMKArray
● useBindingsParser
● renderIfPossible
● itemRenderer
● Model
● mediateItem
● on
● recreate
● toArray
● toNative
● rerender
● hasOwnProperty
● toJSON
● pull
● each
● METHOD
● METHOD_
45. Matreshka.Array#METHOD()
Includes all the methods existing in the native JavaScript Array.
Remarks
● The forEach method returns itself instead of undefined
● The methods which return a new array (splice, slice, filter, map...) originally, in Matreshka they return a new Matreshka.Array
instance
46. Matreshka.Array#METHOD_()
The list of the available flags:
● silent: true - disables event triggering
● dontRender: true - disables rendering
● skipMediator: true - disables mediators