ExtJS - 如何在列表项中使用未绑定到存储的变量Tpl

Question

如何获得列表的itemTpl来解释不属于其直接存储/数据绑定的变量？例如，我想引用父组件的一些viewModel数据。下面是我能想到的最简单的例子：

Ext.define('ListItemTplTest.view.main.MainView', {
extend: 'Ext.Container',
xtype: 'mainview',
viewModel : {
data : {
message: 'is available'
}
},
items: [
{
xtype: 'list',
itemTpl: '{title} {message}', // how to get the itemTpl to interpret the message variable?
data: [
{ title: 'Item 1' },
{ title: 'Item 2' },
{ title: 'Item 3' },
{ title: 'Item 4' }
]
}
]
})

假设viewModel的message属性可以更新为不同的值(例如/按下按钮，控制器将更新消息(，因此将'is available'硬编码到itemTpl中是不起作用的。

尽管我的实际用例有点不同(子和父存储，而不是子和父数据(，但基本原理是相同的：我的列表组件需要解释来自父数据源的变量。

这适用于使用现代工具包的ExtJS 7.3.1。

Answer 1

• https://docs.sencha.com/extjs/6.5.3/modern/Ext.dataview.List.html#cfg-viewModel

例如，根据文档，您可以绑定数据属性。

这是一把小提琴：https://fiddle.sencha.com/#view/editor&小提琴/3dvl

let list = Ext.create({
xtype: 'list',
viewModel: {
data: {
tplData: [{
title: 'Item 1',
message: 'a'
}, {
title: 'Item 2',
message: 'b'
}, {
title: 'Item 3',
message: 'c'
}, {
title: 'Item 4',
message: 'd'
}]
}
},
fullscreen: true,
itemTpl: '{title} {message}',
bind: {
data: '{tplData}'
}
});

Ext.defer(function() {
list.getViewModel().set('tplData', [{
title: 'Item 4',
message: 'a'
}])
list.getViewModel().notify() // not sure if really needed
}.bind(list), 2000)