如何向 JointJS 单元格添加类？答案

【问题标题】：How do I add a class to a JointJS cell?如何向 JointJS 单元格添加类？
【发布时间】：2015-11-07 18:12:17
【问题描述】：

我可以使用attr 方法来更改单元格的属性，例如设置链接的笔画：

conn.attr({'.connection': { stroke: 'red' }});

但我宁愿在 css 文件中设置这样的属性，例如像这样

.connection {
    stroke: #999;
}

.connection.error {
    stroke: #F00;
}

有没有办法将这些类添加到生成的 SVG 中？

我试过了

conn.attr({'.connection': { class: 'error' }});

但这删除了.connection 类，这很重要。可以写

conn.attr({'.connection': { class: 'connection error' }});

但显然这不会扩展到拥有多个正交类（error、highlighted...）

【问题讨论】：

你试过Vectorizer > addClass(className)吗？
没有。我的印象是Vectorizer 将作用于视图（ElementView）所拥有的 DOM 对象，而上述影响模型对象（Element）。
可以提供 JSFiddle 吗？
嗯，真正的代码当然是比较大的东西的一部分。重建需要一段时间。
嗯，你可能是对的，看我的回答（对此我很不高兴。）

标签： svg jointjs

【解决方案1】：

任何在 2018 年寻找这个 2015 年问题的答案的人，也可以试试这个。

我遇到了类似的问题并使用highlighters 解决了它。

cellView.highlight(null, {
    highlighter: {
        name: 'addClass',
        options: {
            className: 'some-custom-class'
        }
    }
});

上面的代码会为单元格视图元素添加一个类some-custom-class。要删除该类，请使用具有完全相同参数的cellView.unhighlight(...) 方法。请注意，现在它只会删除 some-custom-class 和其他类（如果存在）将保持原样。

参考：https://resources.jointjs.com/docs/jointjs/v2.1/joint.html#highlighters.addClass

【讨论】：

【解决方案2】：

在official demos 之一中，我找到了以下代码：

function toggleLive(model, signal) {
    // add 'live' class to the element if there is a positive signal
    V(paper.findViewByModel(model).el).toggleClass('live', signal > 0);
}

我必须说，在我看来，以这种方式直接与视图交互似乎违反了模型-视图分离，但如果在官方代码中使用，那么我得出结论，这是最惯用的方式。

【讨论】：

感谢您找到这个隐藏的宝石。也可以使用 jQuery：$(paper.findViewByModel(model).el).toggleClass('live')。我知道它看起来不对，但将 data 或其他东西与它关联起来特别有用（Vectorizer 中没有 data 函数）。如果我们使用 $el jQuery 引用，它会变得更加简单：paper.findViewByModel(model).$el.data('liveID', 14214).