ViewModel 绑定记录幻象答案

【问题标题】：ViewModel bind record phantomViewModel 绑定记录幻象
【发布时间】：2015-03-18 09:09:02
【问题描述】：

我想根据记录是否为幻像来隐藏复选框。尝试使用视图模型来实现这一点，但它似乎不起作用。相关代码见下文。为简洁起见，我省略了不相关的代码。 viewModel 到视图的绑定按预期工作。当我尝试将activeRecord.name 绑定到标题属性时，2 向数据绑定工作正常。

视图模型

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

    data: {
        activeRecord: null
    }
});

控制器

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

查看

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

【问题讨论】：

标签： extjs mvvm viewmodel

【解决方案1】：

我们最终为 Model 使用了以下基类，它比 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);
    }
});

然后你就可以使用你想要的绑定了

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

【讨论】：

【解决方案2】：

尝试使用公式：

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

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

那么在你看来：

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

【讨论】：