JointJs 初始化自定义元素

Question

我有以下自定义元素：

var ir = joint.dia.Element.define('my.Rectangle', {
  attrs: {
    body: {
      // ...
    },
    header: {
      // ...
    }
  }
}, {
  initialize: function() {
    this.on("change:header", function() {
                console.log('header change')
            }, this), joint.dia.Element.prototype.initialize.apply(this, arguments)
  },
  markup: [{
      tagName: 'rect',
      selector: 'body',
  }, {
      tagName: 'text',
      selector: 'header'
  }]
});

我想用 joint.util.breakText 打断页眉的文本并设置正文的大小，以适应它，每次更改时。（即使是第一次设置）

之后

var rect = new joint.shapes.my.Rectangle()
rect.attr('header/text', 'FooBarBaz')
rect.addTo(graph);

没有任何反应，形状已添加到屏幕，但控制台日志中没有任何内容。

Answer 1

change:header会监听header属性的变化。要收听此内容，请使用 rect.prop 而不是 rect.attr:

rect.prop('header', 'FooBarBaz')

来自文档，位于 http://resources.jointjs.com/docs/jointjs/v2.2/joint.html#dia.Element.prototype.prop:

This is an equivalent of the attr() method but this time for custom data properties.

要监听属性变化，使用change:attrs:

this.on('change:header', function (element, opt) {
  if (opt.propertyPath === 'attrs/header/text') {
    console.log('header change');
  }
}, this), joint.dia.Element.prototype.initialize.apply(this, arguments);

JointJs 初始化自定义元素

JointJs initializing custom element

javascript

jointjs