meteor - 检测触发了哪个响应式(Reactive)查询

Question

我有一个复杂的 meteor 应用程序可能不是那么独特的问题。

我有几个操作会导致页面的某些部分刷新，而这些操作实际上并不需要。但是我无法找到哪个 find() (或多个 find()'s )是被触发的。我知道有问题的集合，只是不知道哪个 find()。

我可以在每次使用的 find 上使用 observeChanges，但这将是很多额外的代码。

有没有一种简单的方法可以查看正在触发的内容以及由什么触发的内容？

谢谢!

Answer 1

这是您可能会发现有用的渲染日志记录功能。它记录每个模板呈现到控制台的次数。您知道如果在初始页面加载后重新呈现模板，那是因为它所依赖的响应式(Reactive)数据源发生了变化。可以在辅助方法中访问此 react 性数据源，或者模板是列表项(即在 {{#each ...}} 块辅助程序中)并且添加/移动/删除/更改了列表项。还要记住，当子模板被渲染或重新渲染时，子模板会调用其父模板的渲染回调。因此，这可能会让您误以为父级实际上已从 DOM 中取出并放回原处，但事实并非如此。

因此，您可以在客户端代码的末尾调用此函数以查看渲染计数:

  function logRenders () {
    _.each(Template, function (template, name) {
      var oldRender = template.rendered;
      var counter = 0;

      template.rendered = function () {
        console.log(name, "render count: ", ++counter);
        oldRender && oldRender.apply(this, arguments);
      };
    });
  }

编辑 :这是一种包装查找游标以将游标的所有更改记录到控制台的方法。我刚刚为我正在研究的一个名为reactive-vision 的新包编写了一个与此类似的函数。希望尽快发布。

var wrappedFind = Meteor.Collection.prototype.find;

Meteor.Collection.prototype.find = function () {
  var cursor = wrappedFind.apply(this, arguments);
  var collectionName = this._name;

  cursor.observeChanges({
    added: function (id, fields) {
      console.log(collectionName, 'added', id, fields);
    },

    changed: function (id, fields) {
      console.log(collectionName, 'changed', id, fields);
    },

    movedBefore: function (id, before) {
      console.log(collectionName, 'movedBefore', id, before);
    },

    removed: function (id) {
      console.log(collectionName, 'removed', id);
    }
  });

  return cursor;
};