使用 Meteor 进行就地编辑:无法读取 null 的属性“parentNode" [英] In-Place Editing With Meteor: Cannot read property 'parentNode' of null

问题描述

我为 network 模型设置了就地编辑.有两个输入字段，分别用于模型的 title 和 description.当用户点击标题时，它会为 切换

标签，就像在规范的 Todos 示例中一样.

I have in-place editing set up for a network model. There are two input fields, for the title and the description of the model. When the user clicks on the title, it switches out the <h2> tags for an <input>, much as in the canonical Todos example.

我正在向相关模板添加事件，如下所示:

I am adding events to the relevant template like this:

Template.network_edit.events = {}

Template.network_edit.events['click #network-description'] = -> 
    Session.set('editing_network_description',true)
    Meteor.flush()
    focus_field_by_id('network-description-input')

Template.network_edit.events['click #network-title'] = -> 
    Session.set('editing_network_title',true)
    Meteor.flush()
    focus_field_by_id('network-title-input')

focus_field_by_id 函数是，

  var focus_field_by_id = function (id) {
  var input = document.getElementById(id);
  if (input) {
    input.focus();
    input.select();
  }
};

一切都按预期进行，但是当我单击 #network-description 时，我在控制台中看到一个错误:

Everything works as expected, but when I click on the #network-description, I see an error in the console:

Uncaught TypeError: Cannot read property 'parentNode' of null

在 liveui.js 的第 600 行抛出.当我点击 #network-title 时，我没有收到这样的错误.

Thrown at line 600 of liveui.js. When I click on #network-title, I receive no such error.

如果我颠倒事件的顺序，将 #network-title 事件放在第一位，然后将 network-description 放在第二位，我会在单击时收到错误#network-title 代替.通常，添加的第一个事件会引发此错误，但不会引发后续事件.

If I reverse the order of the events, putting the #network-title event first, and the network-description second, I receive the error when I click on the #network-title instead. In general, the first event added throws this error, but not subsequent events.

正如我所说，一切似乎都正常(输入出现、获得焦点等)，但错误令人不安，我可能遗漏了一些东西.

As I said, everything appears works properly (the inputs appear, gain focus, etc.), but the error is disconcerting and I may be missing something.

推荐答案

啊哈，我能够重现这个.

Aha, I was able to reproduce this.

这是在事件处理过程中 DOM 发生变异时发生的错误.在调用 Meteor.flush() 之后，事件的原始目标不再在模板中.Meteor 的事件处理代码卡住了，可能是在检查第二个处理程序是否适用时，因此第一个处理程序似乎中断了.该错误是无害的，您没有做错任何事情.

This is a bug that occurs when the DOM is mutated during event handling. After the call to Meteor.flush(), the original target of the event is no longer in the template. Meteor's event processing code chokes, probably while checking to see if the second handler applies, hence why the first one seems to break. The error is harmless, and you aren't doing anything wrong.

正在为下一个版本重写事件处理，我已经针对这种情况进行了回归测试，新代码已经通过.

Event handling is being rewritten for the next release, and I have a regression test in place for this case that the new code already passes.

感谢您的报告和耐心等待.

Thanks for the report and for your patience.

这篇关于使用 Meteor 进行就地编辑:无法读取 null 的属性“parentNode"的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！