Question

我正在尝试使用HTML，Javascript和AJAX在列表中呈现图像。

以下是我的HTML代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>cat Clicker</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="cc.js"></script>
</head>
<body>
<div class="container">
<div class="row-fluid">
    <div class="col-sm-3">
        <ul id="elems" class = "elems"></ul>
    </div>
    <div class="col-sm-9">
    Hi
    </div>

</body>
</html>

在我的JavaScript代码中，我有3个名为view1的模型，模型和章鱼如下

$(function(){
    var model = {
        init: function() {
            imageArray = [];
            imageArray[0] = {
                id: 0,
                image01 : new Image(),
                src : "c0.jpg",
                imageCaption : "cat0",
                count: 0
            };
            imageArray[1] = {
                id: 1,
                image01 : new Image(),
                src : "c1.jpg",
                imageCaption : "cat1",
                count: 0
            };
            imageArray[2] = {
                id: 2,
                image01 : new Image(),
                src : "c2.jpeg",
                imageCaption : "cat2",
                count: 0
            };
            imageArray[3] = {
                id: 3,
                image01 : new Image(),
                src : "c3.jpeg",
                imageCaption : "cat3",
                count: 0
            };
            imageArray[4] = {
                id: 4,
                image01 : new Image(),
                src : "c4.jpg",
                imageCaption : "cat4",
                count: 0
    };
        },
        returnImages: function() {
            return imageArray.src
        }
    };


    var octopus = {
        openAll: function() {
            return model.returnImages();
        },
        init: function() {
            model.init();
            view1.init();
        }
    };
    var view1 = {
        init: function() {
            this.catList = $('#elems');
            view1.render();
        },
        render: function(){
            var htmlStr = '';
            octopus.openAll().forEach(function(image){
                htmlStr += "<li><img class="imge" src='" + image + "' width=\"160\" height=\"120\"/></li></hr><br/>";
            });
            this.catList.html(htmlStr);
        }
    };


    octopus.init();
});

在模型var中，我设置了所有数据和一个返回所有图像的函数。在view1 var中，我设置了我的渲染函数来显示图像列表，在var octopus中我正在尝试连接模型和视图。但是图像不会在我的页面中呈现。请帮我理解我在哪里出错了。

先谢谢

Answer 1

您出错的地方是imgArray是Array且没有财产src

returnImages: function() {
    return imageArray.src
}

数组中的每个元素都有一个属性src，因此我怀疑您正在尝试获取所有src属性的数组。将其更改为

returnImages: function() {
    return imageArray.map(function(e){
       return e.src;
    });
}

然而，这不是整个故事 - 你的model.init方法创建数组，但从不对它做任何事情 - 一旦该方法结束它就会被抛弃。您可能希望将其存储在模型中的某个位置：

var model = {
        init: function() {
            imageArray = [];
            //.. snip .. //
            model.imageArray= imageArray;
       }
}

然后您需要更新returnImages

returnImages: function() {
    return model.imageArray.map(function(e){
       return e.src;
    });
}

Answer 2

你应该返回数组..

returnImages: function() {
   return imageArray
}

然后绑定到每个图像的src属性

 render: function(){
        var htmlStr = '';
        octopus.openAll().forEach(function(image){
            htmlStr += "<li><img class='imge' src='" + image.src + "' width=\"160\" height=\"120\"/></li></hr><br/>";
        });
        this.catList.html(htmlStr);
    }

Here to see it working in jsfiddle

图像无渲染 - JavaScript，Ajax

2 个答案: