Ленивая загрузка в Knockout JS - PullRequest
Новая
       1

Ленивая загрузка в Knockout JS

9 голосов
/ 22 марта 2012

Я пытаюсь загрузить и проанализировать данные json из внешнего источника в таблицу с помощью Knockout JS. Пока что все прошло успешно с помощью следующего кода: 

    // Snippet
    var self = this;
    self.notices = ko.observableArray([]);
    self.currentTab = ko.observable(5);
    ko.computed(function() {
        $.getJSON('http://json.source.here.com/tab/'+ko.toJS(self.currentTab), function(threads) {
            if (threads !== null) {
                self.notices(threads);
            } else {
                self.notices([]);
            }
        });
    }, self.notices);

Когда пользователь нажимает на определенную вкладку, он загружает данные json (темы форума) на основе выбранного значения вкладки (self.currentTab) в таблицу в виде строк (self.notices).

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

РЕДАКТИРОВАТЬ: Я понял это через консоль разработчика Google Chrome.

В настоящее время у меня есть модель представления в файле JavaScript, который также используется всеми остальными страницами. Он состоит из привязок для всех страниц.

Мой вопрос: как я могу загрузить данные json на определенную страницу или только при наличии привязок - отложенная загрузка? Желательно, чтобы все привязки были сохранены в одном файле JavaScript, я не хочу выделять их и загружать отдельно для каждой страницы.

1 Ответ

11 голосов
/ 22 марта 2012

Вот статья, которую я недавно написал на тему simliar: http://www.knockmeout.net/2011/06/lazy-loading-observable-in-knockoutjs.html

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

Кроме того, в блоге описывается использование флага deferEvaluation на вычисляемой наблюдаемой, чтобы гарантировать, что логика не будет работать, пока кто-то не свяжется с вычисляемой наблюдаемой (в вашем случае у вас есть анонимная вычисляемая наблюдаемая, но вы Можно добавить его в модель представления как свойство и связать с ним в своем представлении. Без этого флага код оценки будет выполняться при создании вычисляемой наблюдаемой, что нежелательно в вашем случае.

...