使用Appcelerator创建动态ImageView并通过HTTP GET填充

时间:2016-08-26 14:49:25

标签: javascript android ios appcelerator appcelerator-titanium

快一点。

我有一个由对API的HTTP GET请求填充的TableView。它在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();

感谢任何帮助!

西蒙

1 个答案:

答案 0 :(得分:0)

由于您正在以不同的函数下载图像postImage正在链接到最后一个元素,因为在图像出现时已完成循环。将postImage作为参数传递给getMedia

时,它应该有效