Matreshka.js is a JavaScript framework that provides two-way data binding and reactive programming capabilities. It includes classes like Matreshka for the core functionality, Matreshka.Object for defining model objects, and Matreshka.Array for collections. Key features include binding data to DOM nodes, mediating property values, linking properties together, and automatically updating the UI when data changes. Various binders and predefined behaviors are available. The framework supports inheritance, events, and defining custom behaviors.

1. made by Me
Matreshka.js

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>

3. Structure
● Class Matreshka (Core)
● Class Matreshka.Object (Model)
● Class Matreskka.Array (Collection)

4. Class Mathreska
Examples
// creating of the instance
var mk = new Matreshka; // or var mk = new MK;
// inheritance
var MyClass = Class({
'extends': Matreshka,
constructor: function () {
this.sayHello();
},
sayHello: function () {
alert("Hello World!");
}
});
// inheritance es6
class MyClass extends Matreshka {
constructor () {
this.sayHello();
}
sayHello () {
alert('Hello World!');
}
}

5. Class Mathreska
● isMK
● $sandbox
● sandbox
● on
● onDebounce
● once
● off
● trigger
● bindNode
● bindOptionalNode
● unbindNode
● boundAll
● $bound
● bound
● selectAll
● $
● select
● eq
● defineGetter
● defineSetter
● mediate
● linkProps
● get
● set
● remove
● define
● delay
● version
● isXDR
● defaultBinders
● extend
● Class
● $b
● useAs$
● noop
● each
● debounce
● lookForBinder
● randomString
● binders

6. Matreshka#on(names, callback, triggerOnInit=false,
context)
Examples
// simple
this.on('foo', function () {
alert('Custom Event is fired');
});
this.trigger('foo');
// Passing the context
this.on('foo', function () {
alert(this.a); // 5
}, {a: 5});
this.trigger('foo', 'Hello world');
// Fire the event after initialization
this.on('foo', function () {
alert('bar');
}, true);

7. Matreshka#trigger(names, arg)
Examples
this.on('foo bar', function (a, b, c) {
alert(a + b + c);
});
this.trigger('foo', 1, 2, 3); // 6

8. Matreshka#bindNode(key, node, binder, eventOptions)
Examples
this.bindNode('myKey', '.my-element', {
on: 'click',
getValue: function () { ...
},
setValue: function () { ...
},
initialize: function () { ...
}
});

9. Matreshka#bindNode(key, node, binder, eventOptions)
Examples
this.bindNode('myKey', '.my-checkbox', {
on: 'click',
getValue: function () {
return this.checked;
},
setValue: function (v) {
this.checked = !!v;
}
});
this.myKey = true;

10. Matreshka#bindNode(key, node, binder, eventOptions)
Examples
this.bindNode('myKey', '.my-slider', {
on: 'slide',
getValue: function () {
return $(this).slider('option', 'value');
},
setValue: function (v) {
$(this).slider('option', 'value', v);
},
initialize: function () {
$(this).slider({
min: 0,
max: 100
});
}
});
this.myKey = 42;

11. Matreshka#bindNode(key, node, binder, eventOptions)
Examples
this.bindNode('myKey', '.my-element', binder, {
assignDefaultValue: false
});

12. Matreshka#bindNode(keyElementPairs, binder,
eventOptions)
Examples
this.bindNode({
myKey1: '.custom-checkbox',
myKey2: 'textarea'
});

13. Matreshka#bindNode(setOfArguments, eventOptions)
Examples
this.bindNode([
[{
myKey1: '.my-element1',
myKey2: '.my-element2'
}],
[{
myKey3: '.my-element3',
myKey4: '.my-element4'
}, {
on: 'click',
getValue: function () { ... },
setValue: function () { ... }
}]
……..
]);

14. Matreshka#binders
Examples
MK.binders.myCoolBinder = function (var1, var2) {
return {
on: 'click',
getValue: function () { ...
},
setValue: function () { ...
},
initialize: function () { ...
}
};
};
this.bindNode('myKey', '.my-element', MK.binders.myCoolBinder('Hello', 'World'));

15. Matreshka#binders
The list of the predefined binders:
● Matreshka.binders.innerHTML
● Matreshka.binders.visibility
● Matreshka.binders.className
● Matreshka.binders.property
● Matreshka.binders.attribute
● Matreshka.binders.input
● Matreshka.binders.textarea
● Matreshka.binders.select

16. Matreshka.binders.innerHTML()
Examples
this.bindElement('myKey', '.my-element', MK.binders.innerHTML());
// the same as
this.bindElement('myKey', '.my-element', {
setValue: function (v) {
this.innerHTML = v;
}
});

17. Matreshka.binders.visibility(value=true)
Examples
this.bindElement('myKey', '.my-element', MK.binders.visibility(true));
// the same as
this.bindElement('myKey', '.my-element', {
setValue: function (v) {
this.style.display = v ? '' : 'none';
}
});
this.bindElement('myKey', '.my-element', MK.binders.visibility(false));
// the same as
this.bindElement('myKey', '.my-element', {
setValue: function (v) {
this.style.display = v ? 'none' : '';
}
});

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

21. Matreshka#set(keyValuePairs, eventOptions)
Examples
this.set({
myKey1: 1,
myKey2: 2
});
// passing eventOptions as second argument
this.set({
myKey: 3
}, {
myFlag: 'Jigurda'
});

22. Matreshka#$sandbox
Examples
this.bindNode('sandbox', '.app');
this.$sandbox; // the same as $('.app')

23. Matreshka#$bound(key)
Examples
this.bindNode('myKey', '.my-element');
this.$bound('myKey'); // will return $('.my-element')
// without key
this.bindNode('sandbox', '.app');
this.$bound(); // will return $('.app')

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

26. Matreshka#linkProps(keys1, keys2, handler,
setOnInit=true)
Examples
this.linkProps('greeting', 'name', function () {
return 'Hello, ' + this.name + '!';
});
this.name = 'Joe';
alert(this.greeting); // 'Hello, Joe!'

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'

28. Matreshka#linkProps(keys, instancesAndKeys, handler,
setOnInit=true)
Examples
anotherInstance1.a = 2;
anotherInstance2.b = 3;
this.linkProps('sum', [
anotherInstance1, 'a',
anotherInstance2, 'b'
], function (a, b) {
return a + b;
});
alert(this.sum); // 5
this.on('change:sum', function () {
alert('this.sum equals ' + this.sum);
});
anotherInstance1.a = 5; // 'this.sum equals 8'

29. Matreshka#getAnswerToTheUltimateQuestionOfLifeThe
UniverseAndEverything()
Examples
this.getAnswerToTheUltimateQuestionOfLifeTheUniverseAndEverything();

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

32. Class Mathreska.Object
Examples
// the same as new MK.Object().jset({a: 1, b: 2});
new MK.Object({
a: 1,
b: 2
});

33. Class Mathreska.Object
● isMKObject
● keys
● on
● hasOwnProperty
● toObject
● toNative
● toJSON
● keyOf
● jset
● remove
● addDataKeys
● removeDataKeys
● each

34. Matreshka.Object#toJSON()
Examples
var mkObject = new MK.Object({
a: 1,
b: 2,
c: new MK.Object({
d: 3,
e: 4
})
});
// returns {a: 1, b: 2, c: {d: 3, e: 4}}
mkObject.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_

41. <virtual>Matreshka.Array#itemRenderer
Examples
var MyArray = Class({
'extends': MK.Array,
itemRenderer: '<li>',
Model: MyModel,
constructor: function () {
this.bindNode('sandbox', '.my-list');
}
});
var MyArray = Class({
'extends': MK.Array,
itemRenderer: '<li>',
Model: MyModel,
constructor: function () {
this.bindNode('sandbox', '.my-widget');
this.bindNode('container', '.my-list');
}
});

42. <virtual>Matreshka.Array#itemRenderer
Examples
var MyArray = Class({
'extends': MK.Array,
Model: MyModel,
itemRenderer: '<div class="my-div">Be cool</div>', // '#be-cool-template'
constructor: function () { ... }
});
var MyArray = Class({
'extends': MK.Array,
Model: MyModel,
itemRenderer: function () {
return '<div class="my-div">Be cool</div>'; // '#be-cool-template' or document.createElement( 'div' )
},
constructor: function () { ... }
});

43. <virtual>Matreshka.Array#Model(data, mkArray)
Examples
var MyModel = Class({
'extends': MK.Object,
constructor: function (data) {
this.jset(data);
this.doSomething();
},
doSomething: function () { ... }
});
var MyArray = Class({
'extends': MK.Array,
Model: MyModel
});

44. <virtual>Matreshka.Array#Model(data, mkArray)
Examples
var myArray = new MyArray;
myArray.push({
a: 1,
b: 2
}, {
a: 3,
b: 4
})
// will return [{a: 1, b: 2}, {a: 3, b: 4}]
myArray.toJSON();
// es6
class MyArray extends MK.Array {
get Model() {
return MyModel;
}
}

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

47. Matreshka.Array#METHOD_()
Examples
this.push_(1, 2, 3, {
silent: true
});
this.pop_({
silent: true
});
this.on('modify', function (evt) {
alert(evt.flag); // 42
});
this.push_(1, 2, 3, {
flag: 42
});

48. Matreshka.Array#pull(index, evtOptions)
Examples
// passing index of the array
var removed;
this.recreate(['a', 'b', 'c']);
removed = this.pull(1);
alert(removed); // 'b'
alert(this.toString()); // 'a,c'
// passing of the delete
var object1 = {},
object2 = {},
removed;
this.push(object1, object2);
removed = this.pull(object2);
alert(removed === object2); // true
alert(this.length); // 1

49. Questions?

50. The end