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：

这等效于attr（）方法，但这一次是自定义数据属性。

要收听属性更改，请使用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初始化自定义元素

1 个答案: