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）将json数据（论坛帖子）加载到表格中，形式为行（self.notices）。

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

编辑：我通过谷歌Chrome的开发者控制台了解了这一点。

我目前在JavaScript文件中拥有我的视图模型，每个其他页面也在使用它。它包含所有页面的绑定。

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

Answer 1

以下是我在一篇简短的话题中撰写的文章：http://www.knockmeout.net/2011/06/lazy-loading-observable-in-knockoutjs.html

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

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

在Knockout JS中加载延迟

1 个答案: