使用 Appcelerator 创建动态 ImageView 并通过 HTTP GET 填充
Creating Dynamic ImageViews and populating via HTTP GET using Appcelerator
快点。
我有一个 TableView,正在通过对 API 的 HTTP GET 请求进行填充。它 returns 在 iOS 和 Android 上使用 Appcelerator 混合文本、图像、电影等。
我已经安排好了一切并且工作正常,但是当我循环浏览图像时,只有我的 tableView 中的最后一个项目填充了图像,而不是所有的图像。
我怀疑是因为 imageView 没有唯一的名称。我必须在 for 循环中执行请求,因为这就是 API 的设置方式,每次下载都必须单独请求。
有什么实现方法吗?
函数 getMedia(itemID, mediaType) 是我下载并将其应用到 imageView 的地方。
var f = Ti.Filesystem.getFile(Ti.Filesystem.applicationDataDirectory, itemID + '.png');
f.write(this.responseData); // write to the file
postImage.image = f.nativePath;
这是我的代码:
var xhr = Ti.Network.createHTTPClient({
onerror: function() {
// hide the table
exploreTableView.visible = false;
},
onload: function() {
// parse the retrieved data, turning it into a JavaScript object
json = JSON.parse(this.responseText);
Ti.API.info(json);
// don't build the table if no posts have been made
if (json.length == 0) {
tableData = [];
//holdingLabel.visible = true;
exploreTableView.visible = false;
} else {
//holdingLabel.visible = false;
exploreTableView.visible = true;
for (i = 0; i < json.length; i++) {
// check if this has been deleted, if so, skip it and move on!
if (json[i].status == "alive") {
row = Ti.UI.createTableViewRow({
height: 'auto',
bottom: 10,
selectedBackgroundColor: 'transparent',
//editable: deleteRow,
layout: 'vertical'
});
var postView = Ti.UI.createView({
top: 0,
height: Ti.UI.SIZE,
layout: 'vertical'
});
// detect what media we have
// show an image if there is an image uploaded
if (json[i].type == "image/jpeg") {
var postImage = Ti.UI.createImageView({
image: 'images/bcell-square-picture-pre-load.png',
defaultImage: 'bcell-square-picture-pre-load.png'
});
postView.add(postImage);
getMedia(json[i]._id, "photo");
}
row.add(postView);
tableData.push(row);
// set some variables to access
row.itemID = json[i]._id;
function getMedia(itemID, mediaType) {
// let's fetch the media for the post
if (mediaType == "photo") {
var url = "https://myapi.com/";
}
var xhr = Ti.Network.createHTTPClient({
onload: function() {
// handle the response
Ti.API.info('Media: ' + this.responseData);
var f = Ti.Filesystem.getFile(Ti.Filesystem.applicationDataDirectory, itemID + '.png');
f.write(this.responseData); // write to the file
postImage.image = f.nativePath;
}
});
xhr.open("GET", url);
// set the header for the correct JSON format
xhr.setRequestHeader("xxx", Ti.App.Properties.getString('token'));
// send the data to the server
xhr.send();
}
}
}
}
exploreTableView.setData(tableData);
}
});
xhr.open("GET", url);
xhr.setRequestHeader("xxx", Ti.App.Properties.getString('token'));
// send the data to the server
xhr.send();
感谢任何帮助!
西蒙
因为您是在不同的函数中下载图像 postImage
链接到最后一个元素,因为当图像出现时循环已经完成。当您将 postImage
作为参数传递给 getMedia
时它应该可以工作
快点。
我有一个 TableView,正在通过对 API 的 HTTP GET 请求进行填充。它 returns 在 iOS 和 Android 上使用 Appcelerator 混合文本、图像、电影等。
我已经安排好了一切并且工作正常,但是当我循环浏览图像时,只有我的 tableView 中的最后一个项目填充了图像,而不是所有的图像。
我怀疑是因为 imageView 没有唯一的名称。我必须在 for 循环中执行请求,因为这就是 API 的设置方式,每次下载都必须单独请求。
有什么实现方法吗?
函数 getMedia(itemID, mediaType) 是我下载并将其应用到 imageView 的地方。
var f = Ti.Filesystem.getFile(Ti.Filesystem.applicationDataDirectory, itemID + '.png');
f.write(this.responseData); // write to the file
postImage.image = f.nativePath;
这是我的代码:
var xhr = Ti.Network.createHTTPClient({
onerror: function() {
// hide the table
exploreTableView.visible = false;
},
onload: function() {
// parse the retrieved data, turning it into a JavaScript object
json = JSON.parse(this.responseText);
Ti.API.info(json);
// don't build the table if no posts have been made
if (json.length == 0) {
tableData = [];
//holdingLabel.visible = true;
exploreTableView.visible = false;
} else {
//holdingLabel.visible = false;
exploreTableView.visible = true;
for (i = 0; i < json.length; i++) {
// check if this has been deleted, if so, skip it and move on!
if (json[i].status == "alive") {
row = Ti.UI.createTableViewRow({
height: 'auto',
bottom: 10,
selectedBackgroundColor: 'transparent',
//editable: deleteRow,
layout: 'vertical'
});
var postView = Ti.UI.createView({
top: 0,
height: Ti.UI.SIZE,
layout: 'vertical'
});
// detect what media we have
// show an image if there is an image uploaded
if (json[i].type == "image/jpeg") {
var postImage = Ti.UI.createImageView({
image: 'images/bcell-square-picture-pre-load.png',
defaultImage: 'bcell-square-picture-pre-load.png'
});
postView.add(postImage);
getMedia(json[i]._id, "photo");
}
row.add(postView);
tableData.push(row);
// set some variables to access
row.itemID = json[i]._id;
function getMedia(itemID, mediaType) {
// let's fetch the media for the post
if (mediaType == "photo") {
var url = "https://myapi.com/";
}
var xhr = Ti.Network.createHTTPClient({
onload: function() {
// handle the response
Ti.API.info('Media: ' + this.responseData);
var f = Ti.Filesystem.getFile(Ti.Filesystem.applicationDataDirectory, itemID + '.png');
f.write(this.responseData); // write to the file
postImage.image = f.nativePath;
}
});
xhr.open("GET", url);
// set the header for the correct JSON format
xhr.setRequestHeader("xxx", Ti.App.Properties.getString('token'));
// send the data to the server
xhr.send();
}
}
}
}
exploreTableView.setData(tableData);
}
});
xhr.open("GET", url);
xhr.setRequestHeader("xxx", Ti.App.Properties.getString('token'));
// send the data to the server
xhr.send();
感谢任何帮助!
西蒙
因为您是在不同的函数中下载图像 postImage
链接到最后一个元素,因为当图像出现时循环已经完成。当您将 postImage
作为参数传递给 getMedia