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.
<!-- 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 -->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"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 }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?
- Allow to use numbers in MK.Object#addJSONKeys and MK.Object#removeJSONKeys
- Return removed element from MK.Array#pop and MK.Array#shift methods
- Do nothing if undefined is passed to MK.Object#addJSONKeys and MK.Object#removeJSONKeys (now throws error)
- Remove jQuery dependence (create mQuery(?))
- Use element as this in MK.elementProcessors functions
- Merge MK.DOMArray with MK.Array
- Listen 'keyup' event for checkboxes/radios (if keyboard is using) (MK.elementProcessors)
- Listen 'paste' event for input[type="text"] and textarea (MK.elementProcessors)
- Think about how to create shortcut when listening many properties change
this.on( 'change:a change:b change:c change:d change:e change:f change:g' );
// →
this.on( 'change:[a b c d e f g]' ); // ?
* Create MK#**addDependence** method
```js
mk.addDependence( 'perimeter', 'a b', function() { return ( this.a + this.b ) * 2} );
mk.addDependence( 'a', 'perimeter b', function() { return this.perimeter/2 - this.b } );
mk.addDependence( 'b', 'perimeter a', function() { return this.perimeter/2 - this.a } );- Make possible to add DOM events like so:
mk.on( 'click::myKey', f );
// Instead of
// mk.$el( 'myKey' ).on( 'click', f.bind( this ) );- Plugins
- MK.MVVM
- MK.Hash
- MK.Table
Author: Andrey Gubanov [email protected]
License: MIT License