javascript - 无法在打字稿的 JointJS 元素中添加 HTML

问题描述

我正在将 HTML 添加到打字稿中的 JointJS 自定义元素内的代码中。我正在关注本教程。当我在 typescript 中使用相同的代码时ngOnInit()。我在纸上看不到 HTML 元素。我可以通过将不透明度设置为 1 来验证这些矩形框是否存在但 HTML 文本和样式不存在。

代码：

joint.shapes['html'] = {};
    joint.shapes['html'].Element = joint.shapes.basic.Rect.extend({
        defaults: joint.util.deepSupplement({
            type: 'html.Element',
            attrs: {
                rect: { stroke: 'none', 'fill-opacity': 0 }
            }
        }, joint.shapes.basic.Rect.prototype.defaults)
    });

joint.shapes['html'].ElementView = joint.dia.ElementView.extend({

        template: [
            '<div style="position: absolute; background: #3498DB;z-index: 2000;">',
            '<button class="delete">x</button>',
            '<label></label>',
            '<span></span>', '<br/>',
            '<select><option>--</option><option>one</option><option>two</option></select>',
            '<input type="text" value="I\'m HTML input" />',
            '</div>'
        ].join(''),

        initialize(): void {
            console.log("Init function called") //THIS LINE IS NEVER PRINTED ON THE CONSOLE
            _.bindAll(this, 'updateBox');
            joint.dia.ElementView.prototype.initialize.apply(this, arguments);

            this.$box = $(_.template(this.template)());
            // Prevent paper from handling pointerdown.
            this.$box.find('input,select').on('mousedown click', function(evt) {
                evt.stopPropagation();
            });
            // This is an example of reacting on the input change and storing the input data in the cell model.
            this.$box.find('input').on('change', _.bind(function(evt) {
              this.model.set('input', $(evt.target).val());
            }, this));
            this.$box.find('select').on('change', _.bind(function(evt) {
              this.model.set('select', $(evt.target).val());
            }, this));
            this.$box.find('select').val(this.model.get('select'));
            this.$box.find('.delete').on('click', _.bind(this.model.remove, this.model));
            // Update the box position whenever the underlying model changes.
            this.model.on('change', this.updateBox, this);
            // Remove the box when the model gets removed from the graph.
            this.model.on('remove', this.removeBox, this);
            console.log("************Init function processed"+this)

            this.updateBox();
        },
        render: function() {
            joint.dia.ElementView.prototype.render.apply(this, arguments);
            this.paper.$el.prepend(this.$box);
            this.updateBox();
            return this;
        },
        updateBox: function() {
          console.log("****This is the time")
          // Set the position and dimension of the box so that it covers the JointJS element.
          var bbox = this.model.getBBox();
          // Example of updating the HTML with a data stored in the cell model.
          this.$box.find('label').text(this.model.get('label'));
          this.$box.find('span').text(this.model.get('select'));
          this.$box.css({
              width: bbox.width,
              height: bbox.height,
              left: bbox.x,
              top: bbox.y,
              transform: 'rotate(' + (this.model.get('angle') || 0) + 'deg)'
          });
      },

      removeBox: function(evt) {
        this.$box.remove();
      }
    });

我在初始化方法中添加了一条控制台日志消息，ElementView但从未打印过。joint.shapes.html.Element代码与教程中的代码相同，只是对to稍作更改，joint.shapes['html'].Element因为 typescript 不支持前者。

谁能建议我需要进行哪些更改才能使代码与打字稿兼容？

标签： javascripthtmltypescriptcustom-elementjointjs

return new joint.dia.Paper(Object.assign(parms, { model: this.graph, gridSize: 65, drawGrid: { name: 'mesh', args: { color: '#DDDDDD' }}, linkConnectionPoint: this.linkConnectionPoint, interactive: true, ***cellViewNamespace: joint.shapes,*** background: { color: '#F7F8FC' } }));

javascript - 无法在打字稿的 JointJS 元素中添加 HTML

问题描述

解决方案

推荐阅读