Область применения getJSON в jQuery - PullRequest
Новая
       26

Область применения getJSON в jQuery

0 голосов
/ 03 августа 2011

У меня возникли некоторые проблемы при попытке управлять областью при использовании getJSON.
Так что на странице HTML у меня есть неупорядоченный список, который должен быть заполнен элементами списка из файла JSON.Список разметки для карусели.

HTML:
<ul class="carousel"></ul>

JS: 

grabJSON : function() {
    $.getJSON('file.json', function(data) {
        var items = [];
        $.each(data.foo, function(k, v) {
            items.push('<li>' + v.bar + '</li>');
        }
        $('ul.carousel').append(items.join(''));
        // carousel action here
        $('ul.carousel').carouselFunction({
            // carousel options here
        });
    });
}

В настоящее время я должен поместить функцию карусели в функцию getJSON.Если я сделаю другую функцию для настройки карусели, я потеряю область действия в getJSON.

Каков предпочтительный метод решения этой проблемы, чтобы я мог получить setupCarousel : function(), который вызывается из getJSON?Обычно, если я хочу вызвать функцию из другой функции в объекте, я могу просто перейти на this.setupCarousel(), однако с вложенной областью действия я не уверен, как с этим справиться.

Кроме того, за пределами функции getJSON у меня нет доступа ни к одному из добавленных элементов.Так что я могу получить доступ к ul, но не к любому из элементов списка, созданных при добавлении их из getJSON.

Ответы [ 2 ]

3 голосов
/ 03 августа 2011

Вызов $.getJSON является асинхронным. Итак, если вы сделаете это: 

thing.grabJSON();
do_some_other_stuff();

do_some_other_stuff будет выполнено до того, как вызов $.getJSON завершится. Вы должны поместить все в обратный вызов $.getJSON, потому что этот фрагмент кода будет выполнен в будущем; обратный вызов может свободно передавать любые полученные данные другим функциям (как в ответе Кишнора), но код, который выполняется после $.getJSON (где после означает после в исходном коде) не может зависеть от $.getJSON звоните, делайте что-нибудь.

Вы могли бы сделать что-то вроде этого: 

function buildCarousel(items) {
    $('ul.carousel').append(items.join(''));
    $('ul.carousel').carouselFunction({
        // carousel options here
    });
}

// ...

grabJSON : function(cb) {
    $.getJSON('file.json', function(data) {
        var items = [];
        $.each(data.foo, function(k, v) {
            items.push('<li>' + v.bar + '</li>');
        }
        cb(items);
    });
}

//...

thing.grabJSON(buildCarousel);

, если вы хотите отделить $.getJSON от того, что нужно сделать с этим JSON. В данном конкретном случае разбить его на части, как указано выше, - это более занятая работа, чем реальная работа, но такой тип паттерна (обратные вызовы внутри обратных вызовов, обратные вызовы полностью) довольно распространен при работе с AJAX.

0 голосов
/ 03 августа 2011

Вы пробовали что-то подобное?

grabJSON : function() {
    $.getJSON('file.json', function(data) {
        var items = [];
        $.each(data.foo, function(k, v) {
            items.push('<li>' + v.bar + '</li>');
        }
        makeCarousel(items);
    });
}
//pass items to make carosuel function and use it this should solve your problem.
makeCarosuel: function(items) {
$('ul.carousel').append(items.join(''));
        // carousel action here
        $('ul.carousel').carouselFunction({
            // carousel options here
        });
}
...