草庐IT

javascript - 在 Knockout JS 中延迟加载

coder 2024-07-15 原文

我正在尝试通过 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 文件中，我不想将它们分开并在每个页面上加载它们。

最佳答案

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

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

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

关于javascript - 在 Knockout JS 中延迟加载，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/9828404/

javascriptKnockoutsectionselfobservablejqueryjsonknockout.jslazy-loading

有关javascript - 在 Knockout JS 中延迟加载的更多相关文章

  1. ruby - 如何在续集中重新加载表模式？ - 2

    鉴于我有以下迁移:Sequel.migrationdoupdoalter_table:usersdoadd_column:is_admin,:default=>falseend#SequelrunsaDESCRIBEtablestatement,whenthemodelisloaded.#Atthispoint,itdoesnotknowthatusershaveais_adminflag.#Soitfails.@user=User.find(:email=>"admin@fancy-startup.example")@user.is_admin=true@user.save!ende

  2. ruby - RuntimeError(自动加载常量 Apps 多线程时检测到循环依赖 - 2

    我收到这个错误:RuntimeError(自动加载常量Apps时检测到循环依赖当我使用多线程时。下面是我的代码。为什么会这样？我尝试多线程的原因是因为我正在编写一个HTML抓取应用程序。对Nokogiri::HTML(open())的调用是一个同步阻塞调用，需要1秒才能返回，我有100,000多个页面要访问，所以我试图运行多个线程来解决这个问题。有更好的方法吗？classToolsController0)app.website=array.join(',')putsapp.websiteelseapp.website="NONE"endapp.saveapps=Apps.order("

  3. ruby-on-rails - 使用 config.threadsafe 时从 lib/加载模块/类的正确方法是什么!选项？ - 2

    我一直致力于让我们的Rails2.3.8应用程序在JRuby下正确运行。一切正常，直到我启用config.threadsafe!以实现JRuby提供的并发性。这导致lib/中的模块和类不再自动加载。使用config.threadsafe!启用:$rubyscript/runner-eproduction'pSim::Sim200Provisioner'/Users/amchale/.rvm/gems/jruby-1.5.1@web-services/gems/activesupport-2.3.8/lib/active_support/dependencies.rb:105:in`co

  4. ruby-on-rails - 从应用程序中自定义文件夹内的命名空间自动加载 - 2

    我们目前正在为ROR3.2开发自定义cms引擎。在这个过程中，我们希望成为我们的rails应用程序中的一等公民的几个类类型起源，这意味着它们应该驻留在应用程序的app文件夹下，它是插件。目前我们有以下类型:数据源数据类型查看我在app文件夹下创建了多个目录来保存这些:应用/数据源应用/数据类型应用/View更多类型将随之而来，我有点担心应用程序文件夹被这么多目录污染。因此，我想将它们移动到一个子目录/模块中，该子目录/模块包含cms定义的所有类型。所有类都应位于MyCms命名空间内，目录布局应如下所示:应用程序/my_cms/data_source应用程序/my_cms/data_ty

  5. ruby-on-rails - 在所有延迟的作业之前 Hook - 2

    是否可以在所有delayed_job任务之前运行一个方法？基本上，我们试图确保每个运行delayed_job的服务器都有我们代码的最新实例，所以我们想运行一个方法来在每个作业运行之前检查它。(我们已经有了“check”方法并在别处使用它。问题只是关于如何从delayed_job中调用它。) 最佳答案 现在有一种官方方法可以通过插件来做到这一点。这篇博文通过示例清楚地描述了如何执行此操作http://www.salsify.com/blog/delayed-jobs-callbacks-and-hooks-in-rails(本文中描述

  6. ruby-on-rails - 使用 javascript 更改数据方法不会更改 ajax 调用用户的什么方法？ - 2

    我遇到了一个非常奇怪的问题，我很难解决。在我看来，我有一个与data-remote="true"和data-method="delete"的链接。当我单击该链接时，我可以看到对我的Rails服务器的DELETE请求。返回的JS代码会更改此链接的属性，其中包括href和data-method。再次单击此链接后，我的服务器收到了对新href的请求，但使用的是旧的data-method，即使我已将其从DELETE到POST(它仍然发送一个DELETE请求)。但是，如果我刷新页面，HTML与"new"HTML相同(随返回的JS发生变化)，但它实际上发送了正确的请求类型。这就是这个问题令我困惑的

  7. ruby-on-rails - 使用 gmaps4rails 动态加载谷歌地图标记 - 2

    如何只加载map边界内的标记gmaps4rails？当然，在平移和/或缩放后加载新的。与此直接相关的是，如何获取map的当前边界和缩放级别？ 最佳答案 我是这样做的，我只在用户完成平移或缩放后替换标记，如果您需要不同的行为，请使用不同的事件监听器:在你看来(index.html.erb):{"zoom"=>15,"auto_adjust"=>false,"detect_location"=>true,"center_on_user"=>true}},false,true)%>在View的底部添加:functiongmaps4rail

  8. ruby-on-rails - 是否可以让 ActiveRecord 为使用 :joins option? 加载的行创建对象 - 2

    我需要做这样的事情classUser'User',:foreign_key=>'abuser_id'belongs_to:gameendclassGame['JOINabuse_reportsONusers.id=abuse_reports.abuser_id','JOINgamesONgames.id=abuse_reports.game_id'],:group=>'users.id',:select=>'users.*,count(distinctgames.id)ASgame_count,count(abuse_reports.id)asabuse_report_count',:

  9. ruby - 在 Mechanize 中使用 JavaScript 单击链接 - 2

    我有这个:AccountSummary我想单击该链接，但在使用link_to时出现错误。我试过:bot.click(page.link_with(:href=>/menu_home/))bot.click(page.link_with(:class=>'top_level_active'))bot.click(page.link_with(:href=>/AccountSummary/))我得到的错误是:NoMethodError:nil:NilClass的未定义方法“[]” 最佳答案 那是一个javascript链接。Mechan

  10. ruby - 运行 rackup private_pub.ru -s thin -E production 命令时无法加载此类文件 -- thin (LoadError) - 2

    我指的是pubrailscasttutorial并已正确执行所有步骤，但在运行最后一个命令时，即rackupprivate_pub.ru-sthin-Eproduction为了架设faye服务器，我收到以下错误:/usr/lib/ruby/1.9.1/rubygems/custom_require.rb:36:in`require':cannotloadsuchfile--thin(LoadError)from/usr/lib/ruby/1.9.1/rubygems/custom_require.rb:36:in`require'from/var/lib/gems/1.9.1/gems

随机推荐