javascript - 在 Knockout JS 中延迟加载

Question

我正在尝试通过 Knockout JS 将来自外部源的 json 数据加载并解析到表中。至此，通过下面的代码一切都成功了:

    // 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);

当用户单击某个选项卡时，它会根据所选选项卡值 (self.currentTab) 以行 (self.notices) 的形式将 json 数据(论坛线程)加载到表中。

然而，一切都按预期工作，我注意到在浏览其他没有上述绑定(bind)的页面时，json 仍在加载($.getJSON 被触发)。我担心这可能会对我的网站的性能产生一些不利影响，因为即使不需要它，它也会加载 json 源。

编辑:我通过 Google Chrome 的开发者控制台解决了这个问题。

我目前在一个 JavaScript 文件中有我的 View 模型，其他所有页面也都在使用该文件。它由所有页面的绑定(bind)组成。

我的问题是，如何在特定页面上或仅在存在绑定(bind)时加载 json 数据 - 延迟加载？最好，我想将所有绑定(bind)保存在一个 JavaScript 文件中，我不想将它们分开并在每个页面上加载它们。

Answer 1

这是我不久前就类似主题写的一篇文章:http://www.knockmeout.net/2011/06/lazy-loading-observable-in-knockoutjs.html

在你的情况下，我认为你真的想在 $.getJSON 调用周围添加一些保护措施，以确保它只在你处于适当的状态(在适当的选项卡)。

除此之外，博文还描述了在计算的可观察对象上使用 deferEvaluation 标志，以确保逻辑不会运行，直到有人绑定(bind)到计算的可观察对象(在您的情况下，您有一个匿名的computed observable，但您可以将它作为属性添加到您的 View 模型并在您的 View 中绑定(bind)它。如果没有此标志，评估代码将在您创建计算的 observable 时运行，这在您的情况下是不可取的。