JointJS - 自定义 LinkView：如何关联到我的自定义模型？答案

【问题标题】：JointJS - Custom LinkView: How associate to my Custom model?JointJS - 自定义 LinkView：如何关联到我的自定义模型？
【发布时间】：2014-07-10 14:50:37
【问题描述】：

我试图禁用链接上的点击事件，这会产生一个顶点，但我需要这个事件的另一个逻辑。这是我的模型：

var modelConexion = joint.dia.Link.extend({
  defaults: joint.util.deepSupplement({
    type: 'modelConexion',
    manhattan: true,
    attrs: {
    },
  }, joint.dia.Link.prototype.defaults),
});

我的自定义链接视图：

var modelConexionView = joint.dia.LinkView.extend({
  pointerdown: function () {
    // LOGIC HERE
  },
});

那么.. 我如何将 modelConexionView 与 modelConexion 关联？ modelConexion 如何知道视图使用什么？

【问题讨论】：

标签： oop backbone.js jointjs

【解决方案1】：

来自 Google Groups 的 Roman Bruckner 的解决方案：

如果你将两者放在同一个命名空间中，JointJS 会找到它自动。

joint.shapes.andydiaz.modelConexion = joint.dia.Link.extend({
  defaults: joint.util.deepSupplement({
    type: 'andydiaz.modelConexion',
    manhattan: true,
    attrs: {},
  }, joint.dia.Link.prototype.defaults),
});

.joint.shapes.andydiaz.modelConexionView = joint.dia.LinkView.extend({
  pointerdown: function () {
    // LOGIC HERE
  },
});

【讨论】：

jointjs如何知道哪个视图与哪个模型相关联？说我想再次扩展 Link，LinkView。 Jointjs 怎么知道哪个视图是哪个模型？

【解决方案2】：

模型在实例化时与视图相关联，因此您可能想要执行以下操作：

var ModelConexion = joint.dia.Link.extend({
  defaults: joint.util.deepSupplement({
    type: 'modelConexion',
    manhattan: true,
    attrs: {
    },
  }, joint.dia.Link.prototype.defaults),
});

var ModelConexionView = joint.dia.LinkView.extend({
  pointerdown: function () {
    // LOGIC HERE
  },
});

var modelConexion = new ModelConexion();
var modelConexionView = new ModelConexionView({model: modelConexion});

【讨论】：

【解决方案3】：

您也可以按照您想要的方式定义视图，然后在论文中定义要使用的链接视图，如 api http://jointjs.com/api#joint.dia.Paper 中指定的那样

传递给构造函数的选项对象可能包含以下属性：

...
* linkView - object that is responsible for rendering a link model into the paper. Defaults to joint.dia.LinkView
* defaultLink - link that should be created when the user clicks and drags and active magnet (when creating a link from a port via the UI). Defaults to new joint.dia.Link
...

然后，查看https://github.com/DavidDurman/joint/blob/master/src/joint.dia.link.js 的 GitHub 源代码，查找 pointerdown。这是我的结果：

  // custom element for link
  // ---------------------------------------------------------------------------
  joint.shapes.customLink = {};
  joint.shapes.customLink.Element = joint.dia.Link.extend({
    defaults: joint.util.deepSupplement({
      type: "customLink.Element",
      attrs: {},
    }, joint.dia.Link.prototype.defaults),
  });
  joint.shapes.customLinkView = joint.dia.LinkView.extend({
    pointerdown: function (evt, x, y) {
      var targetParentEvent = evt.target.parentNode.getAttribute("event");
      if (targetParentEvent && targetParentEvent === "remove") {

        // YOUR STUFF HERE FOR REMOVE

      } else {
        joint.dia.LinkView.prototype.pointerdown.apply(this, arguments);
      }
    },
  });

【讨论】：