ViewModel bind record phantom

问题

I want to hide a checkbox depending on wheter a record is phantom. Trying to implement this using viewmodels, but it doesn't seem to work. See below for the related code. I've left out unrelated code for brevity. The binding of the viewModel to the view is working as expected. When I try to bind activeRecord.name to the title attribute 2-way data binding is working correctly.

Viewmodel

Ext.define('MyApp.view.content.ContentViewModel', {
    extend: 'Ext.app.ViewModel',
    alias: 'viewmodel.content',

    data: {
        activeRecord: null
    }
});

Controller

var contentWindow = Ext.widget('content-details');
contentWindow.getViewModel().set('activeRecord', contentBlock);

View

viewmodel: 'content',
items: [
    {
        xtype: 'checkbox',
        boxLabel: 'My checkbox',
        bind: {
            hidden: '{!activeRecord.phantom}'
        }
    }
]

回答1:

We ended up using the following base class for a Model, which is more convenient rather than a formula in a ViewModel.

// Use your own name instead of BaseModel

Ext.define('BaseModel', {
    extend: 'Ext.data.Model',

    fields: [{
        name: 'phantom',
        persist: false,
        convert: function (v, rec) {
            var id = rec.data[rec.idProperty];
            return !id || (Ext.isString(id) && id.indexOf(rec.entityName) == 0);
        }
    }],

    commit: function (silent, modifiedFieldNames) {
        this.data.phantom = false;
        this.callParent(arguments);
    }
});

Then you'll be able to use the binding you want

    bind: {
        hidden: '{!activeRecord.phantom}'
    }

回答2:

Try to use formulas:

data: {
    rec: null,
    callback: null
},

formulas: {
    isNew: function (get) {
        return !get('rec') || get('rec').phantom;
    }
}

Then in your view:

bind: {
    disabled: '{!isNew}'
},

来源：https://stackoverflow.com/questions/29117889/viewmodel-bind-record-phantom

标签

extjs

mvvm

viewmodel