How can I change the attrs of a custom object in JointJS?

Question

I created a custom element with the JointJS library . The object have two nested Rectangles with two associated Texts.

I want to change his atributtes inside de Model... I only get through JQUERY change his attributes and css, through its ids.

I want to change the attrs in the model and then, update the node to show his new look.

Sorry if I can not explain it well enough, I leave a jsFiddle ->

http://jsfiddle.net/y9ucn/

If you need additional information, please ask.

Thank you.

Here's the class who defines my custom object and on the jsfiddle you can play an example:

MyRect = joint.shapes.basic.Generic.extend({
        markup: [
            '<g class="rotatable">',
            '<g class="scalable">',
            '<rect class="firstRect"/><rect class="secondRect"/>',
            '</g>',
            '<text class="textFirstRect"/><text class="textSecondRect"/>',
            '</g>'].join(''),

        defaults: joint.util.deepSupplement({

            type: 'basic.MyRect',
            attrs: {
                '.firstRect': {
                    'stroke': '#0A1317',
                        'stroke-width': 1,
                        'fill': '#DBF024',
                        'width': 100,
                        'height': 30,
                },
                    '.secondRect': {
                    'stroke': '#0A1317',
                        'stroke-width': 1,
                        'fill': '#DBF024',
                        'width': 100,
                        'height': 30,
                },


                    '.textFirstRect': {
                    'ref': '.firstRect',
                        'ref-x': .5,
                        'ref-y': .5,
                        'y-alignment': 'middle',
                        'x-alignment': 'middle',
                        'fill': '#333',
                        'font-size': 12,
                        'font-family': 'Calibri,Arial',


                },
                    '.textSecondRect': {
                    'ref': '.secondRect',
                        'ref-y': .5,
                        'ref-x': .5,
                        'y-alignment': 'middle',
                        'x-alignment': 'middle',
                        'fill': '#333',
                        'font-size': 12,
                        'font-family': 'Calibri,Arial'
                }

            }
        }, joint.shapes.basic.Generic.prototype.defaults),

        initialize: function () {

            _.bindAll(this, 'format');
            this.format();
            joint.shapes.basic.Generic.prototype.initialize.apply(this, arguments);
        },

        format: function () {
            var attrs = this.get('attrs');
            attrs['.secondRect'].transform = 'translate(0,30)';
        }
    });

Answer 1

You can use the attr() method:

cellView.model.attr('.textSecondRect/text', 'foo');

See the API reference: http://jointjs.com/api#joint.dia.Element:attr.