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

Question

我想在表格中显示整个集合,并使用X-editable将每行中的"名称"字段编辑为可编辑

可以使用最近添加的"selector"选项将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节点可用之前我无法运行其中任何一个,所以我把它放在模板的"渲染"回调中.

问题是每次集合更改时,都会调用呈现,然后将新的editable附加到每个DOM节点以及另一个回调.这意味着只要保存"名称",就会发生内存泄漏和多次回调.

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

Answer 1

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

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 。