Knockout JS 中的延迟加载答案

【问题标题】：Lazy loading in Knockout JSKnockout JS 中的延迟加载
【发布时间】：2012-04-07 09:01:08
【问题描述】：

我正在尝试通过 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 数据（论坛线程）加载到表中。

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

编辑：我通过 Google Chrome 的开发者控制台发现了这一点。

我目前将我的视图模型保存在一个 JavaScript 文件中，该文件也被所有其他页面使用。它由所有页面的绑定组成。

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

【问题讨论】：

标签： javascript jquery json knockout.js lazy-loading

【解决方案1】：

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

在您的情况下，我认为您确实希望在 $.getJSON 调用周围添加一些保护措施，以确保它仅在您处于适当状态时（在适当的选项卡上）发出 AJAX 请求。

除此之外，博客文章还描述了在计算的 observable 上使用 deferEvaluation 标志，以确保在有人绑定计算的 observable 之前逻辑不会运行（在你的情况下，你有一个匿名的计算 observable，但是你可以将它作为属性添加到您的视图模型中并在您的视图中绑定它。没有此标志，评估代码将在您创建计算的 observable 时运行，这在您的情况下是不可取的。

【讨论】：

非常感谢 :) 我最终使用了您的 Knockout JS 插件。但是，我将“ko.observable”更改为“ko.observableArray”以更好地服务于我的目的——应该没问题吧？它现在似乎按预期工作。
是的，应该没问题。 observableArray 实际上是一个 observable 底层，添加了一些额外的方法来处理数组操作。
再次感谢。哦，我刚刚注意到，当我单击其他选项卡时，它似乎没有更新。当可观察到的变化之一正确时，它应该重新评估？
如果你能简单地做一个基本的演示，我很乐意看看。如果我了解您在做什么，那么它与帖子中的示例略有不同。您有一个 observableArray 来保存您的数据，并且在您更改选项卡时会加载内容？如果加载数据的函数考虑了当前选项卡，那么当currentTab 更改时，您只需在onDemandObservable 上调用.refresh()。您可以通过手动订阅来做到这一点：self.currentTab.subscribe(function() { self.notices.refresh(); });（如果需要notices）。
看看：jsfiddle.net/rniemeyer/WKTmW/1。基本上，如果您要使用 onDemandObservable，那么您需要在其上调用 refresh() 以重新触发。这可以使用currentTab 上的手动订阅轻松完成。希望这会有所帮助。