JointJs инициализирует пользовательский элемент - PullRequest
0 голосов
/ 15 января 2019

У меня есть следующий пользовательский элемент:

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);

ничего не происходит, фигура добавляется на экран, но ничего в журнале консоли.

1 Ответ

0 голосов
/ 17 января 2019

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);
...