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. Я попробовал $.get, повторив тот же фрагмент PHP, что и выше, и добавил эти данные в this.push().

Когда я пытаюсь это сделать, я всегда получаю эту ошибку: Uncaught 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, чтобы отследить проблему.

Спасибо.


javascript php galleria
person domaind1    schedule 20.01.2012    source источник
comment
С чем вы ожидаете, что this будет связано в вашем обратном вызове .getJSON()? Это точно не будет объект галереи.   -  person Pointy    schedule 21.01.2012
comment
Я знаю, я удалил часть кода, чтобы сделать его более читаемым. getJSON является частью $('#galleria').galleria({ extend: function(options) {} });   -  person domaind1    schedule 21.01.2012
comment
ну, независимо от того, где находится код, this будет установлен браузером, и это будет не то, что this во внешнем контексте.   -  person Pointy    schedule 21.01.2012

Ответы (1)


arrow_upward
0
arrow_downward

Это должно направить вас в правильном направлении. Для @Pointy вам нужно получить ссылку на экземпляр галереи, если вы собираетесь вызывать такой метод, как push. Это лишь один из многих способов сделать это. По сути, вы сохраняете экземпляр галереи в переменной, которая позже передается вашему обработчику событий. Поскольку вы не показали обработчик событий, в котором вы хотите запустить вызов 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>
person quickshiftin    schedule 23.01.2012