(Archive) Matreshka.js - MK.Object

The article is outdated. The new documentation contains the most current information from this post. See Matreshka.Object .

• Introduction
• Inheritance
• MK.Object
• MK.Array
• Matreshka.js v0.1
• Matreshka.js v0.2
• Implement TodoMVC

In previous articles, we learned about the general principles of the Nested Doll: the binding of elements, events, inheritance. At the end of the previous article, I asked myself the question: “How to distinguish between the state of the application (show the user a password) and the application data (login, password,“ remember me ”)”

The class that will help us with this is called MK.Object , which is inherited from the Matreshka class. The idea is simple: we have a lot of keys responsible for the data in the class instance and we believe that the other properties are responsible only for the state of the application and are not a business model.
')


In order to set the property that is responsible for the data, use the method .jset :

 var mkObject = new MK.Object(); mkObject.jset( 'a', 1 ); console.log( mkObject.toJSON() ); // { a: 1 } 

Documentation for .jset : finom.imtqy.com/matreshka/docs/Matreshka.Object.html#jset
Documentation for .toJSON : finom.imtqy.com/matreshka/docs/Matreshka.Object.html#toJSON
Now we can work with the new property as usual:

 var mkObject = new MK.Object(); mkObject.jset( 'a', 1 ); mkObject.a = 2; console.log( mkObject.toJSON() ); // { a: 2 } 

In particular, we can use the methods inherited from the Matreshka class:

 mkObject.bindNode( 'a', '.my-element' ); mkObject.on( 'change:a', handler ); 

If we set a property without adding its key to a set of keys, as a result of the .toJSON method .toJSON we will not see this property:

 var mkObject = new MK.Object(); mkObject.jset( 'a', 1 ); mkObject.b = 3; console.log( mkObject.toJSON() ); // { a: 1 } 

You can add keys to the list of keys using the .addJSONKeys method
Doc: finom.imtqy.com/matreshka/docs/Matreshka.Object.html#addJSONKeys

 mkObject.addJSONKeys( 'b', 'c' ); 

Here follows an important rule: if you are not sure for sure which properties should fall into the result of the .toJSON function, always use .jset instead of the usual assignment. If the keys are known, then I personally prefer to always set the default data:

 var MyClass = Class({ 'extends': MK.Object, constructor: function( data ) { this .initMK() .jset({ //    a: 1, b: 2, c: 3 }) .set( data ) //   (data -    ) ; } }); 

Notice the .initMK call. Here he initializes not only event objects and “special” properties, but also an object — a set of keys. In addition, it adds the necessary event handlers to trigger the "modify" event when the data changes. Example:

 var mkObject = new MK.Object(); mkObject.jset({ a: 1, b: 2 }); mkObject.c = 3; mkObject.on( 'modify', function() { alert( 'Data is changed' ); }); mkObject.a = 4; //   mkObject.b = 5; //   mkObject.c = 6; //   ,    "c"  ,   

If you pass an argument to the class as an object, it interprets it as data:

 var mkObject = new MK.Object({ a: 1, b: 2 }); //   ,   var mkObject = new MK.Object(); mkObject.jset({ a: 1, b: 2 }); 

You can iterate through the data using the .each method:

 var mkObject = new MK.Object(); mkObject.jset({ a: 1, b: 2 }); mkObject.c = 3; mkObject.each( function( item, key ) { console.log( key ); }); //  'a', 'b' 

Doc: finom.imtqy.com/matreshka/docs/Matreshka.Object.html#each

To check whether there is any property in the object using the method .hasOwnProperty

 var mkObject = new MK.Object(); mkObject.jset( 'a', 1 ); mkObject.b = 2; alert( mkObject.hasOwnProperty( 'a' ) ); // true alert( mkObject.hasOwnProperty( 'b' ) ); // false ('b'   ) 

This allows you to use the for..in construction, as for a regular object:

 for( var i in mk ) if( mk.hasOwnProperty( i ) ) { doSomething(i, mk[i]) } 

UPD : Does not work in the eighth donkey due to limitations Object.defineProperty

There are a number of methods whose names speak for themselves:
.keyOf , which searches for a key by value and returns a key (analog of .indexOf for an array).
.keys , which returns an array of keys.
.removeJSONKeys , which removes keys from the set of keys responsible for data.

Take a look at the modified example from the previous article: jsbin.com/disigiza/1/edit
In the constructor, we set the default data:

  ... constructor: function () { this .initMK() .jset({ //   userName: '', password: '', rememberMe: true }) .bindings() .events(); }, ... 

And then, instead of manually constructing the object to be sent to the server, we call the .toJSON method:

  ... login: function () { if (this.isValid) { alert( JSON.stringify( this.toJSON() ) ); } return this; } ... 

In conclusion

Now we know how to separate the Matryoshka data from states that are not interesting for the backend. Wonderful. But what if we need a lot of data? Something like an array or collection from Backbone.js. The solution is the MK.Array class, which I will discuss in the next article.

Thank you for reading the article to the end. All good and good coding.