Question

我有一个ExtJS窗口，其中装有面板（扩展），使用绑定来显示基于JSON对象（存储在ViewModel上）的数据。绑定字段之一是根据与每个面板关联的JSON对象上的属性值计算出的公式。我正在以编程方式更新特定事件的属性之一上的值，并希望重新评估公式并更新屏幕。

我可以通过将ViewModel上的数据显式设置为原始的克隆（更改了适用的属性）来实现这一点。但是，根据其他帖子/板块中有关相关问题的观点，我的理解是，使用Binding对象中的“深层”配置可以更适当地完成此操作。

我尝试在似乎可能的每个位置都更改绑定，以便添加深度配置（在面板上，在ViewModel的公式中，等等），但没有设法更改该值即使已成功更改基础JSON对象的属性，也可以在屏幕上显示。

以下是一个小提琴，我在其中尽可能简化了重现的问题：

Ext.define('MyApp.view.BindTesting', {
    extend: 'Ext.panel.Panel',
    layout: 'vbox',

    viewModel: {
        data: {
            testObject: {
                a: 'sixteen',
                b: 'two',
                c: 'three',
                d: 'one',
                e: 1
            }
        },

        formulas: {
            something: {
                bind: '{testObject}',
                get(info) {
                    return info.a;
                }
            }
        }
    },

    bind: {
        title: 'Current data is {something}'
    },

    items: [{
        xtype: 'button',
        text: 'Change Me',
        handler: function () {
                const me = this,
                    vm = me.ownerCt.getViewModel(),
                    data = vm.get('testObject'),
                    count = data.e;

                if (count % 2 === 0) {
                    data.a = data.b;
                    console.log('changing to b. a = ' + data.a);
                } else if (count % 3 === 0) {
                    data.a = data.c;
                    console.log('changing to c. a = ' + data.a);
                } else {
                    data.a = data.d;
                    console.log('changing to d. a = ' + data.a);
                }

                data.e++;

                // NOTE - using set makes it work, but this is
                // supposedly bad form and we should use "deep: true"
                // in the binding
                // vm.set('testObject', Ext.clone(data));
            }
    }]
});

Ext.onReady(function () {

    Ext.create('MyApp.view.BindTesting', {
        renderTo: Ext.getBody(),
        width: 400
    });
});

Answer 1

不过，这是我根据其他人的见解所理解的有关相关问题的帖子/公告板适当地使用“深度”配置来完成绑定对象。

绑定上的deep配置意味着对子对象的更改做出反应，但是viewmodel不会主动跟踪对象本身的更改，因此需要“通知”（通常通过set）来重新评估对象。您在文章中概述的方法是正确的方法，尽管最好先进行对象克隆，然后再进行突变：

const vm = this.lookupViewModel();
const data = Ext.clone(vm.get('testObject'));
const count = data.e;

if (count % 2 === 0) {
    data.a = data.b;
} else if (count % 3 === 0) {
    data.a = data.c;
} else {
    data.a = data.d;
}

data.e++;

vm.set('testObject', data);

还请注意，编写公式的更惯用的方法是：

something: get => get('testObject.a')

ExtJS-如何在ViewModel公式上使用Deep Config设置绑定

1 个答案: