// this -   //   "x"     this.bindNode('x', 'input.my-node'); //  ,  alert this.on('change:x', function() { alert(this.x); }); //  ,   //     "x"  this.x = 'Wow!'; 

 var object = {}; //   "x"     MK.bindNode(object, 'x', 'input.my-node'); //  ,  alert MK.on(object, 'change:x', function() { alert(object.x); }); //  ,   //     "x"  object.x = 'Wow!'; 

ネイティブオブジェクトのサポート

 let object = {}; //  "x”   '.my-node' MK.bindNode(object, 'x', '.my-node'); // "y”      x  z MK.linkProps(object, 'y', 'x z', (x, z) => x + z); //”z” -   ,   ,      MK.mediate(object, 'z', Number); // ... 

 // this.bindNode('x', '.my-node'); // MK.bindNode(object, 'x', '.my-node'); 

 class MyArray extends MK.Array { itemRenderer() { return '<li>'; } constructor() { super().bindNode('sandbox', '.some-node'); } } let arr = new MyArr(); arr.push(someData); 

マトレシュカマジックライブラリー

 magic.bindNode(object, 'x', '.my-node'); magic.linkProps(object, 'y', 'x z', (x, z) => x + z); //  . . 

「ディープバインディング」

 this.a = {b: {c: {d: 41}}} this.bindNode('abcd', '.my-node'); 

 this.ab = {c: {d: 42}}; 

ディープリンク

 this.linkProps('a', 'bc d', (b, c, d) => b + c + d); this.b = 1; this.c = 2; this.d = 3; alert(this.a); // 6 

 this.linkProps('a', [ externalObject, 'b', externalObject2, 'c', this, 'd' ]); externalObject.b = 1; externalObject2.c = 2; this.d = 3; alert(this.a); // 6 

 this.linkProps('a', 'bcd e.f', (d, f) => d + f); this.b = {c: {d: 40}}; this.e = {f: 2}; alert(this.a); // 42 

 this.bc = {d: 1}; 

 let targetObject = {}, o1 = {b: {c: {d: 40}}}, o2 = {e: {f: 2}}; MK.linkProps(targetObject, 'a', [ o1, 'bcd', o2, 'ef' ], (d, f) => d + f); alert(targetObject.a); // 42 

委任されたイベントの透過的な構文

 this.a = new Matreshka(); 

 this.on('a@someevent', handler); this.a.trigger('someevent'); 

 this.on('@someevent', handler); this.push(new Matreshka()); this[0].trigger('someevent'); 

 this.a = new MK.Array(); this.a.push(new Matreshka()); 

 this.on('a@@someevent', handler); this.a[0].trigger('someevent'); 

 this.on('a@someevent', handler); 

 this.on('@someevent', handler); 

 this.on('*@someevent', handler); 

 this.on('a@@someevent', handler); 

 this.on('a.*@someevent', handler); 

setClassFor

 //     ( ) this.x = {a: 41}; //     this.setClassFor('x', MyClass); // ,      MyClass console.log(this.x instanceof MyClass); // true //   "a”  console.log(this.xa); // 41 //    //   "x”    var x = this.x; //    this.x = {a: 42}; // ,    console.log(xa); // 42 // ,       console.log(x === this.x); // true // Wow!    ,   ! 

 localStorage.x = JSON.stringify(this.x); 

 this.x = JSON.parse(localStorage.x); 

 // app.js class App extends MK { constructor(appData) { this.appData = appData; this.setClassFor('appData', AppData); } } // app-data.js class AppData extends MK.Object { constructor(data) { super(data) .setClassFor({ friends: Friends, settins: Settings }); } } // friend.js class Friend extends MK.Object { constructor(data) { super(data); } } // friends.js class Friends extends MK.Array { Model = Friend; constructor(data) { super(...data); } } // settings.js class Settings extends MK.Object { constructor(data) { super(data) .setClassFor('credentials', Credentials); } } // credentials.js class Credentials extends MK.Object { constructor(data) { super(data); } } // app-init.js var app = new App({ settings: { name: 'Vasiliy Vasiliev', credentials: { email: 'vasia.vasia@gmail.com' } }, friends: [{ name: 'Yulia Zuyeva', id: 1 }, { name: 'Konstantin Konstantinopolsky', id: 2 }, { name: 'nagibator3000', id: 3 }] }); //        JSON.stringify(app.appData); //       appData //  ,     app.appData = { settings: { name: 'Petr Petrov', credentials: { email: 'petr.petrov@gmail.com' } }, friends: [{ name: 'Yulechka Zuyeva', id: 1 }, { name: 'Konstantin Konstantinopolsky', id: 2 }] }; 

DOMテンプレートエンジン

 <a href="http://{{website.domain}}/{{category}}/{{page}}">Look at the {{info.title}}</a> 

 this.parseBindings(); this.website.domain = 'example.com'; this.category = 'foo'; this.page = 42; this.info.title = 'cool stuff'; 

 class MyArray extends MK.Array { itemRenderer = '<span>Hello, {{name}}</span>'; ... } 

ECMAScript 2015のさらなる砂糖

 class MyObject extends MK.Object { constructor(data) { super(data) .bindNode('x', '.my-node'); } } //   MyObject   a  b, //    myObject = new MyObject({a: 1, b: 2}); class MyCollection extends MK.Array { constructor(data) { super(...data) .bindNode('x', '.my-node'); } } //  ,   5  myCollection = new MyCollection([1,2,3,4,5]); 

on 、 once 、 onDebounceメソッドでのイベント型オブジェクトのサポート

 this.on('eventname1', handler1); this.on('eventname2', handler2); 

 this.on({ 'eventname1': handler1, 'eventname2': handler2 }); 

 this.on({ 'eventname1': evt => this.x = 42, 'eventname2': evt => doSomethingElse() }); 

 this.on({ 'eventname1': function(evt) { this.x = 42 }, 'eventname2': function(evt) { doSomethingElse(); } }); 

itemRendererのオーバーライド

 //  ,  ES7 class MyCollection extends MK.Array { itemRenderer = "<div>Hi there!</div>"; constructor() { super() .bindNode('sandbox', '.array-sandbox') .push({a: 1}, {a: 2}); } } 

 //   - span this.itemRenderer = '<span>I'm a span</spam>'; //   - div this.itemRenderer = '<div>I'm a div</div>'; 

 fetch('templates/my-template.html') .then(resp => resp.text()) .then(text => this.itemRenderer = text); 

新しいバインダー

 this.bindNode('x', '.my-node', binder); this.x = 42; //      

 this.bindNode('x', '.my-progress'); this.x = 42; //     42 

 this.bindNode('x', '.my-node', MK.binders.innerText()); this.x = 'Some <i>Text</i>'; //    " ”,    

 this.bindNode('x', '.my-node', MK.binders.style('color')); this.x = 'red'; //      

 this.bindNode('x', '.my-file', MK.binders.file('dataURL')); //   ,    this.on('change:x', function() { console.log(this.x.readerResult); // "data:image/png;base64,iVBO..." }); 

innerHTML 、 className 、 プロパティ 、および属性 バインダーの getValue

 <div class="my-div">Some data</div> 

 // ,  this.x  . this.bindNode('x', '.my-div', MK.binders.innerHTML()); alert(this.x); //"Some data" 

onItemRender

 class MyCollection extends MK.Array { Model: MyModel; itemRenderer = '<li>'; constructor() { super() .bindNode('sandbox', '.array-sandbox') .on('*@render', evt => { evt.self.bindNode(...); }); } } 

 class MyCollection extends MK.Array { Model: MyModel; itemRenderer = '<li>'; constructor() { super() .bindNode('sandbox', '.array-sandbox'); } onItemRender(item, evt) { item.bindNode(...); } } 

 class MyModel extends MK.Object { constructor() { super() .on('render', evt => { this.bindNode(...); }); } } 

 class MyModel extends MK.Object { constructor() { super() } onRender() { this.bindNode(...); } } 

ノードと$ノードのプロパティ

 this.bindNode('x', '.my-node'); var boundNode = this.bound('x'); var allBoundNodes = this.$bound('x'); 

 this.bindNode('x', '.my-node'); var boundNode = this.nodes.x; var allBoundNodes = this.$nodes.x; 

いくつかの新しいメソッド

性能向上

バグの処理：テスト

ブラウザのサポート

 this.bindNode('key', '.node'); 

 var mk = new Matreshka(); mk.bindNode('key', '.node'); 

 var object = {}; MK.bindNode(object, 'key', '.node'); 

 var object = MK.to({}); MK.bindNode(object, 'key', '.node'); 

その他の変更

その他

ご挨拶！
再び以前と同じ質問をしましたが、その答えはまだ美しいとは思いませんでした。
たとえば、VKのような対応：

 User = { id: 5, name: 'Fedor', online: true } 

このユーザーを別の部屋に配置します：room1、room2、room3。
User.online = falseの場合、3つの部屋すべてで、たとえば色を変更する必要があります。
T.O. 1つのオブジェクトを含む3つのコレクションで、同時にこのオブジェクトは3か所に表示されます。
注：これらのコレクションが同じタイプ（部屋だけでなく）である必要はなく、異なるタイプや表現であってもかまいません。
単一のオブジェクトを複数のビューにバインドすることは可能ですか？

はい、オブジェクトを含むコレクションは異なる場合があります。 bindRenderedAsSandbox: false , , (, , ). . render , , , .
: jsbin.com/cidise/12/edit . user ( ul), -. tableUsers[0].name = 'xxx' , , . , .
脅威。 IE 8, , , .instanceOf

 object.instanceOf( MyClass ); //  object instanceof MyClass