Results 1 to 3 of 3

Thread: Two-way binding with negation doesn't work

    Success! Looks like we've fixed this one. According to our records the fix was applied for EXTJS-21266 in 5.1.4.
  1. #1

    Default Two-way binding with negation doesn't work

    The two-way data binding doesn't work if there is a negation (!) in a bind config.

    According to the viewModel guide there is no restriction to use a negation with two-way bindings

    Steps to reproduce:
    1) Fiddle https://fiddle.sencha.com/#fiddle/1aip
    2) Start pressing the checkbox and watch displayed flag's values: displayed viewmodel data is not always corresponds to the checkbox state and the checkbox changes it's visual state only after two clicks

  2. #2
    Sencha Premium User
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    19,258

    Default

    Thanks for the report! I have opened a bug in our bug tracker.

  3. #3
    Sencha Premium User
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    19,258

    Default

    For some clarification, the docs state:

    A direct bind descriptor may be able to write back a value to the `ViewModel` as well as retrieve one.
    We should have been more clear in this case that a negated bind isn't in the class of a "direct bind" (which is now added in there).

    The reason we can't write the value back is we're not guaranteed a stable value, consider:

    Code:
    var vm = new Ext.app.ViewModel({
        data: {
            foo: 1
        }
    });
    
    var b = vm.bind('{!foo}', function(v) {
        console.log(v); // !1 -> false
    });
    
    b.setValue(false); // Assuming we negated the value on set, foo would now be true, not the original value.
    To achieve what you want here, you would need to use a formula:

    Code:
    Ext.define('MyApp.view.main.MainModel', {
        extend: 'Ext.app.ViewModel',
        alias: 'viewmodel.main',
        formulas: {
            notFlag: {
                get: function(get) {
                    return !get('flag');
                },
                set: function(v) {
                    this.set('flag', !v);
                }
            }
        },
        data: {
            flag: true
        }
    });
    
    Ext.define('MyApp.view.main.Main', {
        extend: 'Ext.panel.Panel',
        title: 'Main Viewport View',
        viewModel: {
            type: 'main'
        },
        items: [
            {
                xtype: 'checkbox',
                bind: '{notFlag}'
            },
            {
                xtype: 'component',
                bind: 'its {flag}'
            }
        ]
        
    });
    
    
    Ext.application({
        name : 'Fiddle',
        mainView: 'MyApp.view.main.Main',
    
        launch : function() {
            
        }
    });

Similar Threads

  1. Binding doesn't work with validation
    By yorl1n in forum Ext JS 6.x Q&A
    Replies: 3
    Last Post: 24 Aug 2015, 1:13 AM
  2. Replies: 3
    Last Post: 12 Aug 2015, 7:25 PM
  3. The listpaging event binding add button doesn't work
    By brucema in forum Sencha Architect 2.x: Bugs
    Replies: 0
    Last Post: 9 Sep 2012, 7:03 AM
  4. Replies: 2
    Last Post: 12 Dec 2011, 4:22 PM
  5. Combobox binding doesn't work
    By pejo in forum Ext GWT: Discussion
    Replies: 6
    Last Post: 22 Nov 2010, 7:42 AM

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •