通过单击并输入新标签来更改 JointJS 单元格的标签

Question

我用 JointJS 单元格创建了一个图表，现在我想通过单击更改单元格的标签。当我点击一个单元格时，会弹出一个模式，然后我输入一个新文本。文本将存储在一个变量中。当模式关闭时，点击单元格的标签将更改为变量的值。

现在是问题：假设我有四个单元格，每个单元格都有标签 "a"。我单击第一个单元格并将标签更改为 "b"。这样可行。现在我将第二个单元格的标签更改为 "c"，现在问题出现了。第一个和第二个单元格都有新标签 "c"。如果我将第三个单元格的标签更改为 "d" 所有三个修改后的单元格都有新标签 "d".

我的方法：我有一个事件侦听器，当我单击一个单元格时它会执行函数 handleClickOnCell()。该函数将单击的单元格作为参数传递。

paper.on('cell:pointerclick', handleClickOnCell);

在函数 handleClickOnCell() 中触发了一个模态弹出窗口。我输入文本，文本值被分配给 var textLabel 。这样可行。当模态隐藏时，标签更改为 labelText:

的值

function handleClickOnCell(e) {
  $('#captionModal').modal('show');
  $('#captionModal').on('hidden.bs.modal', function () {
    e.model.attr('label/text', labelText);
  });
};

更改标签有效，但是当我更改一个单元格的标签时，我已经更改过一次标签的所有以前的单元格也将它们的标签更改为新标签。

我不知道是什么问题。我认为这是一个参考问题，但我不知道如何解决。对于更合适的方法的提示或建议，我将不胜感激。

Answer 1

试试这个：

paper.on('cell:pointerclick', function (cellView, event, x, y) {
  $('#captionModal').modal('show');
  $('#captionModal').on('hidden.bs.modal', function () {
    cellView.model.attr('label/text', labelText);
  });
});

视图已传递给处理程序，您可以更改视图的模型。

Answer 2

设置标签后尝试删除处理程序。现在，当用户单击单元格时，会添加一个新的处理程序（并且保留以前的处理程序）。

function handleClickOnCell(e) {
  $('#captionModal').modal('show');
  $('#captionModal').on('hidden.bs.modal', function () {
    e.model.attr('label/text', labelText);
    $('#captionModal').off('hidden.bs.modal'); // remove this handler
  });
};

$('#captionModal').one(...); 也应该可以解决问题。

通过单击并输入新标签来更改 JointJS 单元格的标签

Change label of a JointJS cell by clicking on it and type in a new label

html

javascript

jquery

jointjs