devlato/matreshka

Matreshka v0.0.3

Download

Matreshka - is the tiny (15KB uncompressed, 5KB gzipped) client-side Javascript framework that allows you to build your application a new way. The main advantages of Matreshka are:

• binding of DOM elements to the data
• model events
• Pub/Sub pattern
• improved data types (MK.Array and MK.Object)

Forget that you have a UI, because it changes automatically when the data changes.

Getting started

Plug in Matreshka to your app

<!-- Latest version of jQuery 1.X or 2.X -->
<script src="jquery.js"></script>
<script src="build/matreshka.all.min.js"></script>
<!-- that's all -->

Matreshka (main class) using

var mk = new MK;

mk.bindElement( 'myKey', '.my-element' ); // you just bound element to your key "myKey"

mk.on( 'change:myKey', function() {
	alert( 'yeah' );
});

mk.myKey = 5; // changes DOM element (".my-element") and alerts "yeah"

Matreshka.Object (inherits Matreshka) using

var mkObject = new MK.Object({
	a: 3,
	b: 4
});

mkObject.bindElement({
	a: '.a-element',
	b: '.b-element'
});

mkObject.on( 'modify', function() {
	alert( 'yeah' );
});

mkObject.a = 5; // changes DOM element (".a-element") and alerts "yeah"

console.log( mkObject.toJSON() ); // logs { a:5, b:4 }

Matreshka.Array (inherits Matreshka) using

mkArray = new MK.Array( 1, 2, 3, 4 );

mkArray.on( 'push', function() {
	alert( 'yeah' );
});

mkArray.push( 5 ); // adds 5 to the end of given array and alerts "yeah"

console.log( mkArray.toString() ); // logs "1,2,3,4,5"

Cool?

More live examples

Documentation

Matreshka

MK.Object

MK.Array

Release History

---

Issues

Website

Author: Andrey Gubanov [email protected]

License: MIT License

Support/Discussion: ENG, RUS