如何更改自定义模板 JointJS 元素的 CSS？答案

【问题标题】：How to Change CSS of Custom Template JointJS Element?如何更改自定义模板 JointJS 元素的 CSS？
【发布时间】：2016-03-07 15:10:24
【问题描述】：

我使用 JointJS 已经有一段时间了，我正在尝试为我的元素创建一个 HTML 模板。所以我一直在使用tutorial，但它并没有停止为我做这件事。我想要完成的事情是在执行操作时调整 HTML 元素的颜色，例如双击元素。我确实注意到教程中文本的更改方式，但没有更改任何颜色的示例。

编辑

我已经试过这个来获得元素的起始颜色：

joint.shapes.html = {};
joint.shapes.html.OdinElement = 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)
});

// Create a custom view for that element that displays an HTML div above it.
// -------------------------------------------------------------------------

joint.shapes.html.OdinElementView = joint.dia.ElementView.extend({

  template: [
    '<div class="html-element">',
    '<button class="delete">x</button>',
    '<label></label>',
    '<span></span>', '<br/>',
    '</div>'
  ].join(''),

  initialize: function() {
    _.bindAll(this, 'updateBox');
    joint.dia.ElementView.prototype.initialize.apply(this, arguments);

    this.$box = $(_.template(this.template)());

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

    this.updateBox();
  },
  render: function() {
    joint.dia.ElementView.prototype.render.apply(this, arguments);
    this.paper.$el.prepend(this.$box);
    this.updateBox();
    return this;
  },
  updateBox: function() {
    // 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.css({ width: bbox.width, height: bbox.height, left: bbox.x, top: bbox.y, transform: 'rotate(' + (this.model.get('angle') || 0) + 'deg)', background: this.model.get('color')}); // I've tried to add it like a background
  },
  removeBox: function(evt) {
    this.$box.remove();
  }
});

//add a new element like this
new joint.shapes.html.OdinElement({
    position: { x: 80, y: 80 },
    size: { width: 200, height: 50 },
    label: 'label',
    color: '#ff0000'
  });

我也尝试过设置它，就像在标签中设置文本一样，但我不知道是否有这样的功能。

有人知道怎么做吗？

非常感谢！

提姆

【问题讨论】：

嗨，欢迎来到 SO。向我们展示您迄今为止尝试过的内容，因此我们不会开始向您展示您已经尝试过的选项。另外，请向我们展示您的代码，以便我们可以复制并了解您的需求。谢谢。
是的，当然，我已将我的代码添加到原始帖子中：)

标签： javascript html css templates jointjs

【解决方案1】：

我自己找到了答案！

显然不允许在 html 变量中创建与给定元素不同的元素。所以我不得不将joint.shapes.html.OdinElement 更改为joint.shapes.html.Element 并将joint.shapes.html.OdinElementView 更改为joint.shapes.html.ElementView

现在一切正常:)

感谢您的帮助！

【讨论】：