Question

我正在尝试将来自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但它对我不起作用。它似乎并不包括所有正在发挥作用的组件。

Answer 1

您必须将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"
  }
}

将数据绑定到ExtJS

1 个答案: