如何将 ViewModel Store 绑定到 View？答案

【问题标题】：How to bind ViewModel Store to View?如何将 ViewModel Store 绑定到 View？
【发布时间】：2015-12-31 03:36:29
【问题描述】：

我是相当新的 Ext JS，并试图在 Panel 中嵌入 MultiSelect。

ViewModel 有一个 stores 属性，您可以在此处看到：

Ext.define('TEST.view.controls.search.SearchFilterModel', {
    extend: 'Ext.app.ViewModel',
    alias: 'viewmodel.filter',
    data: {
        title: ''
    },
    stores: {
        test: {
            fields: ['id', 'name'],
            proxy: {
                type: 'ajax',
                url: 'api/test',
                reader: 'array'
            },
            autoLoad: true
        }
    }
});

我想将它绑定到我的View 中，如下所示：

viewModel: {
    type: 'filter'
},


layout: 'fit',
border: 1,
plain: true,
scrollable: 'y',
layout: 'fit',


bind: {
    title: '{title}',
},


items: {
    xtype: 'multiselect',
    scrollable: false,
    allowBlank: true,
    ddReorder: true,
    bind: {
        store: '{test}'
    },
    valueField: 'id',
    displayField: 'name'
}

在这种情况下，store 以null 结束，并且没有数据加载到小部件中。但是，如果我只是在视图中对其进行硬编码，而不是绑定商店，那么它就可以工作。

有人知道问题是什么吗？

【问题讨论】：

你为什么决定 store 为空？对我来说，提供的 sn-p 很好，应该可以工作。您应该提供视图的所有代码，最好提供 jfiddle 或 sencha fiddle 来演示问题。
@yorlin - 谢谢，我会尝试组合一个煎茶小提琴。错误是Uncaught TypeError: Cannot read property 'autoCreated' of null
我有您视图的确切绑定结构，但对于 Combobox 并且它不起作用。通过为组合设置'queryMode：local'在腰后很多分钟它起作用了。 :|

标签： javascript extjs mvvm extjs6

【解决方案1】：

您可以将一个空对象作为存储另外传递给绑定存储，这样initComponent 将起作用，例如：

{
    xtype: 'multiselect',
    fieldLabel: 'Multiselect',
    store: {},
    bind: {
        store: '{test}'
    },
    valueField: 'id',
    displayField: 'name'
}

工作示例：https://fiddle.sencha.com/#fiddle/ur8

【讨论】：

您认为这是一个错误还是只是一个未记录的怪事？您需要像这样通过两次store 是否很常见？
其实在绑定一个store的时候，首先extjs会创建一个空的store（不是null，而是一个temporal store），然后再绑定一个普通的store。问题是绑定发生异步且有延迟。问题是您何时想要访问您的商店。可能是，当 extjs 未准备好时，即使商店为空，您也会尝试访问商店。
@yorlin -- 这是有道理的，但我觉得这是一个新的 extjs 开发人员不需要知道的实现细节。它需要上面与store相关的冗余语法。
我遇到了同样的问题，当我尝试添加：store: {}, 绑定延迟，所以我的多组合框没有下拉列表。我用这个：Custorm for work on Modern

【解决方案2】：

这是常见问题。只要你在 store 中使用代理，你必须在 viewrendered 之后加载 store。基本上，将其添加到您的View：

listeners: {
            afterrender: function(view) {
                this.getViewModel().getStore('{test}').load(); // this will provide proxy is being loaded
            }
           }

编辑：我没有注意到你已经放了 autoLoad: true 。经过一番研究，多选组件必须在渲染期间获取“存储对象”。这就是您收到“autoCreated”错误的原因。我的意思是，在创建多选之前，必须创建它的商店。在您的情况下，首先创建您的多选组件，然后将 store 绑定到多选。要解决这个问题，请检查这个小提琴：https://fiddle.sencha.com/#fiddle/uqu

listeners: {
                afterrender: function(view) {
                    view.add({
                        xtype: 'multiselect',
                        scrollable: false,
                        allowBlank: true,
                        ddReorder: true,
                        fieldLabel: 'Multiselect',
                        store: view.getViewModel().getStore('test'), // comment to get autoCreated error
                        valueField: 'id',
                        displayField: 'name'
                    });
                }  
            },

【讨论】：

+1，但我更喜欢其他解决方案。虽然两人都不是很满意。对我来说似乎是一个错误。