我做了这个小提琴,你可以看到发生了什么: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>
1条答案
按热度按时间s71maibg1#
试试这段代码,只是复制到你的小提琴上。这不是一个完美的解决方案,因为它每次都创建一个新的数组。