私は現在、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}"/>画像を表示できるようにするには、あと 1 レベルまで下げる必要があります。 Sencha Touch 2 ウィンドウ...
Store、Model、および View のコードを含めます。
ストア (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>',
後者のオプションは に対して [object OBJECT] を出力するalt_sizesので、通過していることがわかります。alt_sizesネストの下にURLを出力できるように、誰かが私を助けてくれますか? どうもありがとうございました！