如何在 Meteor 模板中的动态字段上使用 X-editable? [英] How do I use X-editable on dynamic fields in a Meteor template?

问题描述

我想在表格中显示整个集合，并使用 X 可编辑

I'd like to display an entire collection in a table, and make the "name" field in every row in-place editable with X-editable

可以使用最近添加的选择器"选项将可编辑附加到表中的每个名称:

editable can be attached to every name in the table using a recently added "selector" option:

$('#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 节点可用之前，我无法运行其中任何一个，所以我将它放在模板的渲染"回调中.

But I can't run either of these until the template is done rendering and the DOM nodes are available, so I put this in the "rendered" callback of the Template.

问题在于，每次集合更改时，都会调用渲染，然后将新的可编辑对象附加到每个 DOM 节点以及另一个回调.这意味着每次保存名称"时都会发生内存泄漏和多次回调.

The problem is that every time the collection changes, rendered is called, and then a new editable is attached to each DOM node as well as another callback. This means memory leaks and multiple callbacks whenever a "name" is saved.

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

Clearly I'm doing this wrong, but I'm not sure where the right place is to call editable and on('save', function()) ?

推荐答案

在每次渲染后调用 editable 似乎是可靠的(尽管我认为可能会导致内存泄漏).但是，如果您希望绑定到诸如保存"之类的事件，您应该确保取消绑定所有现有事件，否则您将在每次渲染时不断绑定新的保存事件:

Calling editable after every rendering seems to be reliable (although I imagine could be causing memory leaks). But if you wish to bind to events like 'save', you should be sure to unbind all existing events, otherwise you will keep binding new save events on every rendering:

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 .

I experimented with only calling editable on the first rendering of the template. That mostly worked as long as you made sure to call it again if the template is ever destroyed (e.g. using routers that create and destroy templates dynamically). But there were some edge cases where it didn't seem to work, so I've reverted back to just calling editable after every rendering.

这篇关于如何在 Meteor 模板中的动态字段上使用 X-editable?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！