6

我用 JointJS library 创建了一个自定义元素。该对象有两个嵌套的矩形和两个关联的文本。

我想改变他在de Model里面的属性......我只能通过JQUERY改变他的属性和css,通过它的id。

我想更改模型中的属性,然后更新节点以显示他的新外观。

对不起,如果我不能很好地解释它,我留下一个 jsFiddle ->

http://jsfiddle.net/y9ucn/

如果您需要更多信息,请询问。

谢谢你。

这是定义我的自定义对象的类,您可以在 jsfiddle 上播放示例:

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

1 回答 1

10

您可以使用以下attr()方法:

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

请参阅 API 参考:http: //jointjs.com/api#joint.dia.Element :attr 。

于 2014-03-03T21:26:07.117 回答