Question

我有这个脚本，我认为会将$ getJSON ajax请求返回的每个新项目推送到数组。然后，mustache.js将数组用于模板化。这是什么样的：

$(function() {

var templateData = new Array();

$.getJSON('views.json', function(data) {
    $.each(data, function(i, item) {
        templateData.push({
            name : item.name
        })
    });
});
console.log(templateData);



var galleryTemplate = $('#gallery-template').html();


$('body').append(Mustache.render(galleryTemplate, templateData));

}）;

我可以在控制台中看到项目没有被推送到数组。页面上没有任何错误，但前端没有任何内容呈现，如下所示：

<body>
   <script id="gallery-template" type="text/html">
      <h1>{{name}}</h1>
   </script>

   <script src="js/jquery-2.1.1.min.js"></script>
   <script src="js/mustache.js"></script>
   <script src="js/jquery-mustache.js"></script>
   <script src="js/custom.js"></script>
</body>

非常感谢任何帮助！

谢谢！

Answer 1

$.getJSON是异步调用，因此它会在您console.log ...和渲染后执行。在$.getJSON来电之后，在$.each回调中移动所有这些行。

$(function() {
    $.getJSON('views.json', function(data) {
        var templateData = [];

        $.each(data, function(i, item) {
            templateData.push({
                name : item.name
            })
        });

        console.log(templateData);

        var galleryTemplate = $('#gallery-template').html();

        $('body').append(Mustache.render(galleryTemplate, templateData));
    });
});

使用jquery .push（）和mustache.js获得$ getJSON结果

1 个答案: