2 Way binding broken?

1. 
   

   Thank you for reporting this bug. We will make it our priority to review this report.

   
   


2. 
   
   
   

   
   

   
   

   2 Way binding broken?

   
   

   
   

   2 Way binding broken?

   
   
   
   

   
   

   I really hope I am wrong or just not understanding how 2 way binding works. If you look at the code below, I am simply binding to ViewModel's 'foo' to component's 'data' attribute. That works great and it binds to ViewModel's 'foo' attribute. I can see 'Hello' after it has been rendered. After the component has been binded and rendered using ViewModel's 'foo', I look up component's 'data' attribute.. it comes up as 'null'? yet.. the component has been rendered with 'foo' value. Wasn't sure what's going but since it's setup as 2 way binding.. I would've imagine if I setData on the component then it'll automatically set the 'foo' value on the ViewModel and it didn't! Ultimately, I am very confused. Please shed some light in this mystery or have I understood 2 way completely wrong?
   

   http://ift.tt/1zaJsZq

   
   

   
   

   Code:

   
   

   
   Ext.application({
       name : 'Fiddle',
   
   
       launch : function() {
   
   
           Ext.define('App.view.MyModel1', {
               extend: 'Ext.app.ViewModel',
               alias: 'viewmodel.mymodel1',
               data: {
                   foo: 'Hello!'
               }
           });        
               
           var container = new Ext.create('Ext.container.Container', {
               viewModel: {
                   type: 'mymodel1' 
               },
               items: [{
                   xtype: 'component',
                   itemId : 'c',
                   bind: {
                        data: '{foo}'  
                   },
                   tpl: '{0}'
               }],
               renderTo: Ext.getBody()
           });
       
           Ext.defer(function() {
               var viewModel = container.getViewModel();
               var component = container.down('#c');
               console.log('viewMode.foo:' + viewModel.getData().foo + '\tcomponent.data:' + component.getData());
   
   
               component.setData('Bye!');         
               console.log('viewMode.foo:' + viewModel.getData().foo + '\tcomponent.data:' + component.getData());
           }, 5000);
   
   
   
   
       }
   });
   

   
   

   
   

   
   

   
   

   
   

   
   
   
   

   ---



3. 
   

   ---



4. 
   
   
   

   
   

   
   

   

   
   

   
   

   
   
   
   

   
   

   There are a number of points here:
   

   1) Most things aren't two way bindable by default. The user can't change the data property, so in a lot of cases it doesn't make sense to have it be two-way, it just adds extra overhead.

   
   

   2) The data config is supposed to be an object or an array, otherwise it gets transformed to "html".

   
   

   3) The data property, specifically, has an issue that prevents it from using two way binding, mostly due to historic reasons. It could be something we fix, but I don't see much value in it.

   
   

   Here's an example of a custom component with 2 way binding:

   
   

   
   

   Code:

   
   

   
   Ext.onReady(function() {
   
       Ext.define('MyComp', {
           extend: 'Ext.Component',
   
           config: {
               myText: ''
           },
   
           twoWayBindable: ['myText'],
           defaultBindProperty: 'myText',
   
           updateMyText: function(myText) {
               if (this.rendered) {
                   this.el.setHtml(myText);
               }
           }
       });
   
       var c = new MyComp({
           renderTo: document.body,
           viewModel: {
               data: {
                   foo: 'abc'
               }
           },
           bind: '{foo}'
       });
   
       setTimeout(function() {
           c.setMyText('def');
           console.log(c.getViewModel().get('foo'));
           setTimeout(function() {
               c.getViewModel().set('foo', 'xyz');
           }, 1000);
       }, 1000);
   });
   

   
   

   
   

   
   

   
   

   
   

   
   

   
   

   Evan Trimboli
   
   Sencha Developer
   
   Twitter - @evantrimboli
   
   Don't be afraid of the source code!

   
   

   
   

   
   

   
   
   
   

   ---



5. 
   
   
   

   
   

   
   

   

   
   

   
   

   
   
   
   

   
   

   Gotcha. I thought by default it was set to '2 way' as long as the bind attribute has getter/setter. How do you know which attribute has 2 way or not. Maybe I should just assume that all binded attribute are 1 way....I've changed the code a bit to not use 'data' attribute and made a bit more simpler example where I'm just changing the 'title' of the panel. Seems 'title' is also binded 1 way by default.
   

   
   

   Code:

   
   

   
   Ext.application({
       name : 'Fiddle',
   
   
       launch : function() {
   
   
           Ext.define('App.view.MyModel1', {
               extend: 'Ext.app.ViewModel',
               alias: 'viewmodel.mymodel1',
               data: {
                   foo: 'Hello!'
               }
           });        
               
           var container = new Ext.create('Ext.container.Container', {
               viewModel: {
                   type: 'mymodel1' 
               },
               items: [{
                   xtype: 'panel',
                   itemId : 'c',
                   bind: {
                        title: '{foo}'  
                   }
               }],
               renderTo: Ext.getBody()
           });
       
           Ext.defer(function() {
               var viewModel = container.getViewModel();
               var component = container.down('#c');
               console.log('viewMode.foo:' + viewModel.getData().foo + '\tcomponent.data:' + component.getTitle());
   
   
               component.setTitle('Bye!');         
               console.log('viewMode.foo:' + viewModel.getData().foo + '\tcomponent.data:' + component.getTitle());
           }, 5000);
       }
   });
   

   
   

   
   

   
   

   
   

   
   

   
   
   
   

   ---

2 Way binding broken?