php - this.push()适用于PHP数据，但不适用于javascript数据

我正在使用Galleria，可让您使用this.push({image:'image.jpg'})快速添加图像

奇怪的是，当我使用PHP准备代码时，它可以正常工作:

<?php
while {
   $add_images .= '{
                      thumb:'".$thumb."',
                      image:'".$image."'
                   }';
}
?>

<script type="text/javascript">
    $(document).ready(function(){
        $('#galleria').galleria({
            extend: function(options) {
               this.push(<?=$add_images;?>);
            }
        })
    });
</script>

这有效。但是，我想使用AJAX加载新图像:

$.getJSON('/ajax/gallery.ajax.php', { command:'load_images' }, function(data){
     this.push(data);
}

回调数据的格式与前面的PHP示例完全相同。我通过回显与上述相同的PHP代码段尝试了$ .get，并将此数据添加到this.push()中。

当我尝试这个时，我总是会得到这个错误:
未捕获的TypeError:无法使用'in'运算符搜索'thumb'

Uncaught TypeError: Cannot use 'in' operator to search for 'thumb' in {
  thumb:'/images/gallerij/1/vanderkam-fvhd5wq1jy-t.jpg',
  image:'/images/gallerij/1/vanderkam-fvhd5wq1jy.jpg',
  big:'/images/gallerij/1/vanderkam-fvhd5wq1jy.jpg',
  title:' image []', description:'null'
},{
  thumb:'/images/gallerij/1/vanderkam-oguuob7pyd-t.jpg',
  image:'/images/gallerij/1/vanderkam-oguuob7pyd.jpg',
  big:'/images/gallerij/1/vanderkam-oguuob7pyd.jpg',
  title:' image []', description:'null'
}

将回调数据传递回对象时，它也起作用。为此，但是我不知道如何使它适用于多个图像:

// code shortened to make it better readable
$.getJSON('/ajax/gallery.ajax.php', { command:'load_images' }, function(data){
      var images;
      $.each(data, function(entryIndex, entry){
         images = { thumb:entry.thumb, image:entry.image, big:entry.big, title:entry.title, description:entry.description };
         $galleria.push(images);
     }
}

如您所见，图像现在被推入每个循环中，从而导致性能下降。如何使用AJAX推送图片？数据必须采用以下格式:

{ image:'image1.jpg' }, { image:'image2.jpg'}, { image:'image3.jpg'}

//Sending data directly to this.push() using json_encode() using PHP
//will add brackets to the output like this:
[{ image:'image1.jpg' }, { image:'image2.jpg'}, { image:'image3.jpg'}]
//This however will not work

如果我明确地复制/粘贴回调数据也可以，但是通过javascript加载，我会再次遇到该错误。

http://galleria.io/docs/1.2/api/methods/#push-element1-elementn

实际地点:
http://www.vanderkamfashion.nl/

请向下滚动查看图库。当点击第25张照片或单击最后一个缩略图(第31张)时，它-应该-加载新图像。我正在运行一些console.logs来跟踪问题。

谢谢。

最佳答案

这应该使您朝正确的方向前进。对于每个@Pointy，如果要调用类似push的方法，则需要获取对Gallery实例的引用。这只是这样做的许多方式之一。基本上，您将Galleria实例存储在一个变量中，该变量随后传递给事件处理程序。由于您没有在要触发ajax调用/更新带有新图像的DOM的事件处理程序中显示事件处理程序，因此我只演示了一个模拟事件。

<script type="text/javascript">
    function loadImageViaAjax(oEvent) {
        $.getJSON(
            '/ajax/gallery.ajax.php',
            { command:'load_images' },
            function(data) {
                oEvent.data.oGalleria.push(data);
            });
    }

    $(document).ready(function(){
        var oGalleria = null;

        $('#galleria').galleria({
            extend: function(options) {
               oGalleria = this;
               this.push(<?=$add_images;?>);
            }
        });

        $('some selector').click({oGalleria : oGalleria}, loadImageViaAjax);
    });
</script>

关于php - this.push()适用于PHP数据，但不适用于javascript数据，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/8949045/