如何将类添加到JointJS单元格？

Question

我可以使用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 ...）

Answer 1

在其中一个官方演示中，我找到了以下代码：

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

我必须说，这看起来像违反模型-视图分离的行为，以这种方式直接与视图进行交互，但是如果在官方代码中使用了这种方法，那么我认为这是最惯用的方法。

Answer 2

任何想要在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