ExtJS 6.2 更新时绑定视图模型的问题答案

【问题标题】：ExtJS 6.2 A problem with Binding a view model while updatingExtJS 6.2 更新时绑定视图模型的问题
【发布时间】：2020-03-25 12:14:11
【问题描述】：

我在 ExtJS 6.2 中绑定视图模型时遇到问题。我想在提交表单时自动更新我的模型。这是我的视图模型：

 Ext.define('..model.OperationProperty', {    
    idProperty: 'ObjectID',    
    binding: {
        deep: true
    },    
    fields: [
        {
            name: 'ID',
            type: 'integer'
        },
        {
            name: 'Operation',
            type: 'auto'
        },
        {
            name: 'OperationForInvoice',
            type: 'auto'
        }
    ]
});

Operation 和 OperationForInvoice 是不同的模型。

我成功加载数据喜欢;

viewmodel.setData({
        operationproperty: operationproperty
          });

 operationproperty.load();

这是我在容器中的复选框。

{
xtype: 'container',
layout: {
    type: 'vbox',
    pack: 'center',
    align: 'middle'
},
items: {
   xtype: 'checkbox',
   bind: {
        data: {
           value: '{operationproperty.Operation.IsExplanationNecessary}',
           deep: true
        }
   }
         //bind: "{operationproperty.Operation.IsExplanationNecessary}",
         //deep: true,
         //bind: {
         //    value: "{showIsExplanationNecessary}"
         //}
         //bind: {
         //    Operation: {
         //        bindTo: '{operationproperty.Operation.IsExplanationNecessary}',
         //        deep: true
         //    }
         //}
}

和 viewmodel looks good 加载数据后。已加载 Operation 和 OperationForInvoice 模型，并且我的复选框看起来已选中。但是当我在表单中进行某些操作时，例如取消选中复选框，更改不会出现在视图模型上，但视图模型底部出现的操作对象仅包含更改的项目。 I added the screen shot

我也搜索“deep: true”，但它不起作用，或者我找不到正确的使用方法。我尝试在视图模型中使用公式，我显示的结果相同。

formulas: {

    showIsExplanationNecessary: {
        bind: {
            bindTo: '{operationproperty.Operation.IsExplanationNecessary}',
            deep: true
        },

        get: function (get) {
            return get;
        },

        set: function (value, type) {
            debugger;
            this.set('operationproperty.Operation.IsExplanationNecessary', value);  //not set the field and add Operation object again
        }
    }

}

希望有人帮忙谢谢。

【问题讨论】：

您提供的数据不足以分析您的问题。在你的代码 sn-ps 中，不清楚原生对象是如何出现的 operationproperty.Operation ，并且模型不是从类继承的 Ext.data.Model
请创建应该显示您的问题的小提琴。我根据您的数据创建了示例，但效果很好fiddle.sencha.com/#view/editor&fiddle/34nd
您的示例将 IsExplanationNecessary 添加到 operationproperty 对象，这就像我的问题。我需要 Operationproperty 内 Operation 对象中的 IsExplanationNecessary 项和更新的值。我会尝试创建小提琴。

标签： extjs data-binding viewmodel

【解决方案1】：

我通过更改公式的设置部分解决了这个问题。新公式会是这样的；

showIsExplanationNecessary: {

        get: function (get) {
            var operation = get('operationproperty.Operation');

            if (operation == null || operation.IsExplanationNecessary == null)
                return false;

            if (operation.IsExplanationNecessary != null) {
                return operation.IsExplanationNecessary;
            }

            return false;
        },

        set: function (value, type) {
            this.getData().operationproperty.getData().Operation.IsExplanationNecessary = value;
        }
    }

如果该问题存在其他解决方案，请通知我。感谢您的宝贵时间。

【讨论】：