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

Question

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

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

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

有没有一种简单的方法可以查看触发了什么以及触发了什么？

谢谢！

Answer 1

Here is a render logging function you might find useful. It logs the number of times each template is rendered to the console. You know if a template is re-rendered after initial page load, it's because a reactive data source that it relies on has changed. Either this reactive data source could have been accessed in a helper method, or the template is a list item (i.e. inside an {{#each ...}} block helper) and a list item was added/moved/removed/changed. Also keep in mind that child templates call their parent's rendered callback when the child is rendered or re-rendered. So, this might confuse you into thinking the parent has actually been taken off the DOM and put back, but that's not true.

So, you can call this function at the end of your client code to see the render counts:

  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);
      };
    });
  }

EDIT: Here is a way to wrap the find cursor to log all changes to a cursor to the console. I just wrote a similar function to this for a new package I'm working on called reactive-vision. Hopefully released soon.

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;
};

Answer 2

谢谢@cmather 的想法。

她是Meteor 1.3改编和更高级的版本logRenders

// Log all rendered templates
// If filter is set, only templates in filter will be logged
// @params filter - name or names of template to filter
logRenders = function logRenders (filter) {
  for (name in Object(Template)){
    if (filter && !Array.isArray(filter)) filter = [filter];
    var template = Template[name];
    if (!template) continue;
    if (filter && filter.indexOf(name) == -1){
      // Clear previous logRenders
      if ('oldRender' in template) template.rendered = template.oldRender;
      delete template.oldRender;
      continue;
    }
    var t = function(name, template){
      if (!('oldRender' in template)) template.oldRender = template.rendered;
      var counter = 0;
      template.rendered = function () {
        console.log(name, ++counter, this);
        this.oldRender && this.oldRender.apply(this, arguments);
      };
    }(name, template);
  };
};