使用Sencha Touch 2访问和查看嵌套JSON (Tumblr API)
使用Sencha Touch 2访问和查看嵌套JSON (Tumblr API)
提问于 2012-11-29 14:37:54
我目前正在使用Sencha Touch 2和Tumblr API创建一个图像库，以便从我的Tumblr网站获取图像。我很难访问最内部嵌套文件夹中的JSON --这就是我需要显示图像URL的地方。我看过无数其他教程和类似的StackOverflow问题，但到目前为止似乎还没有解决办法。我在想人们能不能看看我的代码。
因此，JSON文件的结构如下：
{
"meta": {
"status": 200,
"msg": "OK"
},
"response": {
"blog": { ... },
"posts": [
{
"blog_name": "derekg",
"id": 7431599279,
"post_url": "http:\/\/derekg.org\/post\/7431599279",
"type": "photo",
"date": "2011-07-09 22:09:47 GMT",
"timestamp": 1310249387,
"format": "html",
"reblog_key": "749amggU",
"tags": [],
"note_count": 18,
"caption": "<p>my arm is getting tired.<\/p>",
"photos": [
{
"caption": "",
"alt_sizes": [
{
"width": 1280,
"height": 722,
"url": "http:\/\/derekg.org\/photo\/1280\/7431599279\/1\/
tumblr_lo36wbWqqq1qanqww"
},
{
"width": 500,
"height": 282,
"url": "http:\/\/30.media.tumblr.com\/
tumblr_lo36wbWqqq1qanqwwo1_500.jpg"
},因此，我基本上尝试访问response > posts > photos > alt_sizes > url。是的，非常嵌套。随着我一直在做的事情，我已经能够下到alt_sizes巢，但我需要能够达到一个层次，以获得url，以便我可以把它放在标签<img src="{url}"/>，以显示图像上的森查图奇2窗口.
我将包括我的商店、模型和视图的代码。
这里是商店(PhotoStore.js)：
Ext.define("tumblrPhotos.store.PhotoStore", {
extend: 'Ext.data.Store',
requires: [
'Ext.data.proxy.JsonP',
'tumblrPhotos.model.PostsModel',
],
config: {
model: 'tumblrPhotos.model.PostsModel',
autoLoad: true,
proxy: {
type: 'jsonp',
url: 'http://api.tumblr.com/v2/blog/lisacanblog.tumblr.com/posts/photo?api_key=HssV7DgyS8RtT0uYE5qpSQJwSxs6nIWpx06mMt8kNprCGQqIo8&callback=Ext.util.JSONP.callback',
reader: {
callbackKey: 'callback',
type: 'json',
rootProperty: 'response.posts'
}
}
}
});下面是模型(PostsModel.js)：
Ext.define("tumblrPhotos.model.PostsModel", {
extend: 'Ext.data.Model',
config: {
fields:[ //all the fields of posts BESIDES hasMany (photos)
{name:'blog_name'},
{name:'id'},
{name:'post_url'},
{name:'type'},
{name:'date'},
{name:'timestamp'},
{name:'caption'}
],
hasMany: {
model: 'PhotoModel',
name: 'photos',
associationKey: 'photos'
}
}
});
Ext.define("PhotoModel", {
extend: 'Ext.data.Model',
config: {
fields:[ //all the fields of photos BESIDES hasMany(alt_sizes)
{name:'caption'},
{name:'alt_sizes'}
],
hasMany: {
model: 'AltSizesModel',
name: 'alt_sizes',
associationKey: 'alt_sizes'
},
belongsTo: [{
model:'tumblrPhotos.model.PostsModel',
name: 'photos'
}]
}
});
Ext.define("AltSizesModel", {
extend: 'Ext.data.Model',
config: {
fields:[
{name:'width'},
{name:'height'},
{name:'url'}
],
belongsTo: [{
model: 'PhotoModel',
name: 'alt_sizes'
}]
}
});最后，这里是视图(GalleryView.js)：
Ext.define("tumblrPhotos.view.GalleryView", {
extend: 'Ext.dataview.DataView',
xtype:'galleryview',
requires: [
'tumblrPhotos.store.PhotoStore',
],
config: {
title: 'Gallery',
id: 'gallerypanel',
iconCls: 'star',
iconMask: true,
store: 'PhotoStore',
styleHTMLContent: true,
scrollable: 'vertical',
itemTpl: new Ext.XTemplate (
'<div>',
'{blog_name}',
'{photos}',
'<tpl for="photos">',
'{alt_sizes.url}',
'<p>hi</p>',
'</tpl>',
'<hr>',
'</div>'
)
}
});在我的视图文件中，这不起作用：
'<tpl for="photos">',
'{alt_sizes.url}',
'<p>hi</p>',
'</tpl>', ..。但事实是：
'<tpl for="photos">',
'{alt_sizes}',
'<p>hi</p>',
'</tpl>', 后一个选项输出alt_sizes的对象，因此我知道它正在传递。有人能帮我吗?这样我就可以输出alt_sizes巢下的url了吗？非常感谢!
回答 1
Stack Overflow用户
发布于 2012-11-30 16:31:17
这也是一种适当的方式：
'<tpl for="photos[0].alt_sizes[0]">',
'<img src="{url}" />',
'</tpl>',页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/13628107
复制相关文章
相似问题
腾讯云开发者
