Wie kann ich die Attribute eines benutzerdefinierten Objekts in JointJS ändern?

Question

Ich habe ein benutzerdefiniertes Element mit der JointJS-Bibliothek erstellt. Das Objekt hat zwei verschachtelte Rechtecke mit zwei verknüpften Texten.

Ich möchte seine Atributtes in de Model ändern ... Ich bekomme nur durch JQUERY ändern Sie seine Attribute und CSS, durch seine IDs.

Ich möchte die Attrs im Modell ändern und dann den Knoten aktualisieren, um sein neues Aussehen zu zeigen.

Sorry, wenn ich es nicht erklären kann gut genug, lasse ich ein jsFiddle ->

http://jsfiddle.net/y9ucn/

Wenn Sie weitere Informationen benötigen, wenden Sie sich bitte.

Vielen Dank.

Hier ist die Klasse, den Gegenstand meines benutzerdefinierten definiert und auf dem jsfiddle können Sie ein Beispiel spielen:

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

Sie können die attr() Methode verwenden:

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

die API-Referenz Siehe: http://jointjs.com/api#joint.dia.Element:attr.