ExtJS 5.1.1 Немедленное связывание с огнем в ViewModel

Question

Похоже, что у меня есть недоразумение со временем привязки. У меня есть простой combobox со значением, привязанным к некоторому объекту в viewmodel. Выбор нового значения, событие смены огня, которое запускается после метода setValue, поэтому мое новое значение уже установлено, но моя модель просмотра еще не обновлена. Когда моя модель просмотра будет обновлена? Я нашел некоторую информацию о планировщике, в которой говорится, что мне нужно запустить метод notify(), чтобы немедленно применить изменения к viewmodel, но мне это совсем не помогает.

Ext.define('MyModel', { 
    extend: 'Ext.data.Model', 
    idProperty: 'foo', 
    fields: [{ 
     name: 'bar', 
     type: 'string' 
    }] 
}); 

Ext.define('MyViewModel',{ 
    extend: 'Ext.app.ViewModel', 
    alias: 'viewmodel.my', 
    data: { 
     testObj: { 
      foo: null, 
      bar: null 
     } 
    }, 
    stores:{ 
     combostore: { 
      model: 'MyModel', 
      data: [{ 
       foo: '1', 
       bar: 'qwerty' 
      },{ 
       foo: '2', 
       bar: 'ytrewq' 
      }] 
     } 
    } 
}); 

Ext.define('MyViewController', { 
    extend: 'Ext.app.ViewController', 
    alias: 'controller.my', 
    onChange: function() { 
     var vm = this.getViewModel(); 
     vm.notify(); 
     console.log(vm.get('testObj.foo'));//supposed to be current value 
    } 
}); 

Ext.application({ 
    name : 'Fiddle', 

    launch : function() { 
     Ext.create('Ext.container.Viewport', { 
      controller: 'my', 
      viewModel: { 
       type: 'my' 
      }, 
      layout : 'vbox', 
      items : [ 
       { 
        xtype : 'combo', 
        valueField: 'foo', 
        displayField: 'bar', 
        queryMode: 'local', 
        bind: { 
         store: '{combostore}', 
         value: '{testObj.foo}' 
        }, 
        listeners:{ 
         change: 'onChange' 
        } 

       } 
      ] 
     }); 
    } 
}); 

Вот скрипку как хорошо: https://fiddle.sencha.com/#fiddle/r88

Answer 1

не следует вызывать оповещать непосредственно на ViewModel. Частный: http://docs.sencha.com/extjs/5.0/5.0.1-apidocs/#!/api/Ext.app.ViewModel-method-notify

Просто установите данные, вызвав vm.setData ({}).

onChange: function(cb, newValue, oldValue) { 
    var vm = this.getViewModel(); 

    console.log('newValue', newValue); 
    console.log('oldValue', oldValue); 
    this.getViewModel().setData({'testObj': {'foo': newValue}}); 
    console.log(vm.get('testObj.foo'));//supposed to be current value 
} 

Тем не менее вы можете рассмотреть следующий пример, в котором я использую формулу для получения выбранной модели combobox. Посмотрите, что я удалил слушателя, добавил ссылку на выпадающее имя и создал формулу, чтобы привязать ее к выбранной записи.

Ext.define('MyModel', { 
    extend: 'Ext.data.Model', 
    idProperty: 'foo', 
    fields: [{ 
     name: 'bar', 
     type: 'string' 
    }] 
}); 

Ext.define('MyViewModel',{ 
    extend: 'Ext.app.ViewModel', 
    alias: 'viewmodel.my', 
    data: { 
     testObj: { 
      foo: null, 
      bar: null 
     } 
    }, 
    stores:{ 
     combostore: { 
      model: 'MyModel', 
      data: [{ 
       foo: '1', 
       bar: 'qwerty' 
      },{ 
       foo: '2', 
       bar: 'ytrewq' 
      }] 
     } 
    }, 

    formulas: { 
     currentRecord: { 
      bind: { 
       bindTo: '{myCombo.selection}', 
       deep: true 
      }, 
      get: function(record) { 
       return record; 
      }, 
      set: function(record) { 
       this.set('currentRecord', record); 
      } 
     } 
    } 
}); 

Ext.define('MyViewController', { 
    extend: 'Ext.app.ViewController', 
    alias: 'controller.my', 
    onChange: function(cb, newValue, oldValue) { 
     var vm = this.getViewModel(); 

     console.log('newValue', newValue); 
     console.log('oldValue', oldValue); 
     this.getViewModel().setData({'testObj': {'foo': newValue}}); 
     console.log(vm.get('testObj.foo'));//supposed to be current value 
    } 
}); 




Ext.application({ 
    name : 'Fiddle', 

    launch : function() { 
     var vp = Ext.create('Ext.container.Viewport', { 
      controller: 'my', 
      viewModel: { 
       type: 'my' 
      }, 
      layout : 'vbox', 
      items : [ 
       { 
        xtype : 'combo', 
        reference: 'myCombo', 
        valueField: 'foo', 
        displayField: 'bar', 
        queryMode: 'local', 
        bind: { 
         store: '{combostore}', 
         value: '{testObj.foo}' 
        }/*, 
        listeners:{ 
         change: 'onChange' 
        }*/ 
       }, 
       { 
        xtype: 'label', 
        bind: { 
         text: '{currentRecord.foo}' 
        } 
       } 
      ] 
     }); 

     /* Just an example. You could also select records on the combo itself */ 
     vp.getViewModel().setData({'testObj': {'foo': '2'}}); 
    } 
}); 

Answer 2

Defer будет вашим спасителем:

onChange: function() { 
    var vm = this.getViewModel(); 

    Ext.defer(function(){ 
     console.log(vm.get('testObj.foo'));//supposed to be current value 
    },10,this); 
} 

Answer 3

Пожалуйста, используйте select событие вместо change.

Я думаю, что изменение событий срабатывает даже до того, как значение установлено.