javascript - 绑定(bind)数据以从ExtJS存储区中的其余代理查看

我正在尝试通过REST URL将JSON中的数据填充到视图中。由于某些原因，JSON值不会显示。

这是我的看法：

Ext.define('Project.view.main.Main', {
    extend: 'Ext.panel.Panel',
    layout: 'border',
    bodyBorder: false,
    defaults: {
        collapsible: false,
        split: false
    },
    viewModel: {
        type: 'animalClassViewModel'
    },
    items: [
        {
            region:'north',
            autoHeight: true,
            margin: '0 0 0 0',
            bind: {
                html: '<p style="text-align: center;">{animalClass.name}</p>' // this should display "mammals" from json
            }
        },
        {
            region: 'center',
            margin: '0 0 0 0',
            items:[
                {
                    items: [{
                        xtype: 'tabPanel'
                    }]
                }
            ]
        },

    ]
});

这是我的视图模型：

Ext.define('Project.view.main.AnimalClassViewModel', {
    extend: 'Ext.app.ViewModel',

    alias: 'viewmodel.animalClassViewModel',

    stores: {
        animalClass: {
            model: 'Project.model.AnimalClassModel',
            autoLoad:true,
            proxy: {
                type: 'rest',
                url: 'api/animalClass',
                reader: {
                    type: 'json',
                    rootProperty: 'name' // this is probably unnecessary
                }
            }
        }
    }
});

我的模特：

Ext.define('Project.model.AnimalClassModel', {
    extend: 'Ext.data.Model',

    fields: ['name']
});

这就是JSON的样子：

{
  "_links" : {
    "self" : {
      "href" : "http://localhost:8080/api/animalClass"
    }
  },
  "name" : "mammals"
}

我只在视图中尝试了{animalClass}，但是它返回了整个对象，这很有意义。但是我不确定为什么{animalClass.name}不显示“哺乳动物”。

我尝试按照以下示例进行操作：http://examples.sencha.com/extjs/6.0.0/examples/kitchensink/#binding-associations，但对我而言不起作用。它似乎不包含所有起作用的组件。

最佳答案

您必须将rootProperty设置为指向数据数组（在json中）。这意味着该属性内的所有内容都将作为数据绑定到store：

商店中的代理：

proxy: {
    type: 'rest',
    url : 'users.json',
    reader: {
        type: 'json',
        rootProperty: 'animals'
    }
}

JSON：

{
  "_links" : {
    "self" : {
      "href" : "http://localhost:8080/api/animalClass"
    }
  },
  "animals": {
    "name" : "mammals"
  }
}

关于javascript - 绑定(bind)数据以从ExtJS存储区中的其余代理查看，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/32427259/