meteor - 如何在 Meteor 模板中的动态字段上使用 X-editable？

Question

我想在表格中显示整个集合，并使用 X-editable 就地编辑每一行中的“名称”字段

editable 可以使用最近添加的“选择器”选项附加到表中的每个名称:

$('#collectionTable').editable({
  selector: '.editable-click',
});

// I also need to setup a 'save' callback to update the collection...

$('a.editable-click').on('save', function(e, params) {
  console.log('Saved value: ' + params.newValue);
  // TBD: update the collection 
});

但在模板完成渲染并且 DOM 节点可用之前，我无法运行其中任何一个，因此我将其放在模板的“渲染”回调中。

问题是每次集合更改时，都会调用 render ，然后将一个新的可编辑对象附加到每个 DOM 节点以及另一个回调。这意味着只要保存“名称”，就会发生内存泄漏和多次回调。

显然我做错了，但我不确定调用 editable 和 on('save', function()) 的正确位置在哪里？

Answer 1

在每次渲染后调用 editable 似乎是可靠的(尽管我想可能会导致内存泄漏)。但是，如果您希望绑定(bind)到“保存”之类的事件，则应确保取消绑定(bind)所有现有事件，否则您将在每次渲染时继续绑定(bind)新的保存事件:

Template.editableTable.rendered = function() {

    $('#myParentTable').editable({
      selector: '.editable-click'
    });

    $('a.editable-click').unbind('save').on('save', function(e, params) {
      // Make changes to your collection here.
    });

  };

我尝试只在模板的第一次渲染时调用 editable 。只要您确保在模板被销毁时再次调用它(例如，使用动态创建和销毁模板的路由器)，这主要是有效的。但是在某些极端情况下它似乎不起作用，所以我恢复到在每次渲染后只调用 editable 。