[英]Lazy loading in Knockout JS
我正在尝试通过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文件中,我不想将它们分开并按页面加载它们。
这篇文章是我在一段时间内写的一篇关于simliar主题的文章: http ://www.knockmeout.net/2011/06/lazy-loading-observable-in-knockoutjs.html
在您的情况下,我认为您确实希望在$.getJSON
调用周围添加一些防护,以确保它只在您处于适当状态时(在相应的选项卡上)发出AJAX请求。
除此之外,博客文章描述了在计算的observable上使用deferEvaluation
标志,以确保逻辑不会运行,直到有人绑定计算的observable(在您的情况下,您有一个匿名计算的observable,但您可以将它添加到您的将模型视为属性并在视图中绑定它。如果没有此标志,则在创建计算的observable时将运行评估代码,这在您的情况下是不可取的。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.