我正在尝试将来自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但它对我不起作用。它似乎并不包括所有正在发挥作用的组件。
答案 0 :(得分:0)
您必须将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"
}
}