extjs ExtJ的经典-深度绑定到数组值时,不会重新计算数组添加的项

nsc4cvqm  于 2023-04-20  发布在  其他
关注(0)|答案(1)|浏览(122)

我做了这个小提琴,你可以看到发生了什么:https://fiddle.sencha.com/#view/editor&fiddle/3ndt

Ext.application({
    name: 'Fiddle',

    launch: function () {
        Ext.define('MyViewModel', {
            extend: 'Ext.app.ViewModel',
            alias: 'viewmodel.myviewmodel',

            data: {
                items: ['Item 1', 'Item 2', 'Item 3']
            },
            stores: {
                store: {
                    fields: ['item'],
                    data: []
                }
            },
            formulas: {
                itemCount: {
                    bind: {
                        bindTo: '{items}',
                        deep: true
                    },
                    get: function (data) {
                        //console.log(data);
                        return data.length;
                    }
                },

            }
        });

        Ext.create('Ext.panel.Panel', {
            viewModel: {
                type: 'myviewmodel'
            },

            items: [{
                xtype: 'displayfield',
                fieldLabel: 'Item Count',
                bind: '{itemCount}'
                //bind: '{store.count}'
            }, {
                xtype: 'button',
                text: 'Add item',
                style: 'margin-right: 10px;',
                handler: function () {
                    //console.log('Button 1 clicked');
                    //debugger;
                    let vm = this.up('panel').getViewModel();
                    let stack = vm.get('items');
                    //debugger;
                    stack.push('Item 4');
                    console.log(stack);

                    let store = vm.getStore('store');
                    store.add({
                        item: 'Item'
                    });
                    console.log(store.data.items);
                }
            }],

            renderTo: Ext.getBody()
        });

    }
});

公式itemCount深度绑定到数组,它返回数组中的项目数。当我单击“添加项目”按钮时,我在数组中添加了一个项目,但itemCount公式不会重新计算。
你知道为什么会有这种限制吗?我觉得很奇怪。
作为解决方法,如果我使用store并绑定到store.count属性,那么它就可以工作了。注解掉bind: '{itemCount}'并从下面的行中删除注解,运行fiddle并单击几次AddItem按钮。
顺便说一下,我创建了这个Vue playground,你可以看到vue正确地绑定了数组,即如果向数组中添加了元素,则会重新计算数组的长度。
App.vue

<script setup>
import { ref } from 'vue'

const msg = ref('Hello World!')
const array = ref(['item 1', 'item 2', 'item 3'])
</script>

<template>
  <h1>{{ msg }}</h1>
  <input v-model="msg">
  <br/>
  <button @click="array.push('Item 4')">
    Click me
  </button>
  <span> Array: {{array}}, length: {{array.length}}</span>
</template>
s71maibg

s71maibg1#

试试这段代码,只是复制到你的小提琴上。这不是一个完美的解决方案,因为它每次都创建一个新的数组。

Ext.application({
    name: 'Fiddle',
    launch: function () {
        Ext.define('MyViewModel', {
            extend: 'Ext.app.ViewModel',
            alias: 'viewmodel.myviewmodel',
            data: {
                items: ['Item1', 'Item2', 'Item3']
            },
            formulas: {
                itemCount: {
                    bind: '{items.length}',
                    get: function (data) {
                        console.log('Items length is now ' + data);
                        return data;
                    }
                }
            }
        });
        Ext.create('Ext.panel.Panel', {
            viewModel: {
                type: 'myviewmodel'
            },
            items: [{
                xtype: 'displayfield',
                fieldLabel: 'Item Count',
                bind:  '{itemCount}',
            }, {
                xtype: 'button',
                text: 'Add item',
                style: 'margin-right: 10px;',
                handler: function () {
                    let vm = this.up('panel').getViewModel();
                    let stack = vm.get('items');
                    let newStack = Ext.Array.clone(stack);
                    newStack.push('Item ' + stack.length);
                    vm.set('items', newStack);
                }
            }],
            renderTo: Ext.getBody()
        });

    }
});

相关问题