ExtJS是一套基于JavaScript的web應用程序框架,可以進行前端開發。在這個框架中,json mapping是指將后臺返回的json數據自動映射到前端的view上。
在ExtJS中實現json mapping非常簡單。我們可以在store中使用autoLoad屬性來進行自動映射。例如:
var store = Ext.create('Ext.data.Store', { fields: ['name', 'age', 'address'], autoLoad: true, proxy: { type: 'ajax', url : 'data.json' } });
在上面的代碼中,我們創建了一個包含三個字段的store,然后使用autoLoad屬性來自動從url為data.json的地址中獲取數據,并將數據映射到我們的store中。
為了更好地展示json mapping的效果,我們可以在data.json文件中添加數據。例如:
{ "success":"true", "records":[ {"name":"Tom","age":18,"address":"北京"}, {"name":"Jerry","age":20,"address":"上海"}, {"name":"Lisa","age":22,"address":"廣州"} ] }
在上面的數據中,我們添加了一個success屬性來標識數據是否獲取成功,然后在records數組中添加了三條數據。
如果我們需要自定義映射的邏輯,則需要使用mapping屬性。例如:
var store = Ext.create('Ext.data.Store', { fields: ['name', 'age', 'address'], autoLoad: true, proxy: { type: 'ajax', url : 'data.json', reader: { type: 'json', rootProperty: 'records', successProperty: 'success', mapping: { name: 'userName' } } } });
在上面的代碼中,我們添加了mapping屬性,將后臺返回的userName屬性映射到前端的name字段上。
總之,json mapping在ExtJS中非常方便,可以大大提高開發效率。
下一篇html 標題居中代碼