How do I add a class to a JointJS cell?

Question

I can use the attr method to change attributes of a cell, e.g. to set the stroke of a link:

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

But I would rather set such attributes in the css file, e.g. as in this

.connection {
    stroke: #999;
}

.connection.error {
    stroke: #F00;
}

Is there a way to add such classes to the generated SVG?

I tried

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

but that removes the .connection class, which is important. It works to write

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

but clearly that will not scale to having multiple orthogonal classes (error, highlighted...)

Answer 1

In one of the official demos I find this code:

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

I must say that this looks rather like a violation of the model-view separation to me to directly interact with the view this way, but if that is used in the official code then I conclude that this is the most idiomatic way.