将简单的视图模型与单个记录绑定

Question

我创建了 this fiddle 来展示我想做的事情。

基本上，我配置了一个只加载一条记录的 Store（实际上它将是当前登录的用户）。但是，我似乎无法将任何东西正确绑定到该商店。我怎样才能让 {u.name} 正确输出？

代码如下：

Ext.define('User', {
    extend: 'Ext.data.Model',
    fields: ['id', 'name']
});

Ext.application({
    name : 'Fiddle',

    launch : function() {

        new Ext.Component({
            renderTo: Ext.getBody(),

            viewModel: {
                stores: {
                    u: {
                        proxy: {
                          type: 'ajax',
                          url: 'user.json'
                        },

                        model: 'User',

                        autoLoad: true
                    }
                }
            },

            bind: 'Test name: {u.name}'
        });

    }
});

Answer 1

尝试bind: 'Test name: {u.data.items.0.name}'

更新： 作为对此的解释 - u 是一个具有其属性的对象，因此尝试绑定到 u.name 实际上将绑定到 商店名称 属性。虽然商店没有名称属性，但它始终为空。 Store接收到的数据放在data属性中。项目属性包含接收数据的原始数组等。

Answer 2

在您的 fiddle 中，您正在使用一家商店，而看起来您只需要一条记录。

使用 links 而不是 stores 应该效果更好，例如：

links: {
    u: {
        type: 'User',
        id: 1
    }
}

基于您的代码的工作示例：https://fiddle.sencha.com/#fiddle/uuh

将简单的视图模型与单个记录绑定

Binding a Simple Viewmodel with Single Record

javascript

extjs

mvvm

extjs6