How can i rerender a component on traits change ?

[chapiaddis]

is there a way for a component to re-render forcefully or with built-in methods ?

i want to rerender my component on traits change so whenever my traits updated i want to listen to the event like below and rerender it.

model: {
  default: { .... },
  init() {
      this.on('change:attributes:attribute-change', (e)=> {
         // re-render the component here
          console.log('This is the event', e)
     }
  }
}

FYI: i am using grapes-react with grapesjs

This is the event

Object { cid: "c1528", attributes: {…}, collection: {…}, _changing: true, _previousAttributes: {…}, changed: {…}, _pending: {}, __upSymbComps: o(), __upSymbCls: o(), __upSymbProps: o(), … }
​
__hasUm: 1
​
__upSymbCls: function o()
​
__upSymbComps: function o()
​
__upSymbProps: function o()
​
_changing: false
​
_events: Object { "change:classes": (2) […], "change:attributes:attribute-change": (2) […], "change:attributes:attribute-change": (1) […], … }
​
_listenId: "l1529"
​
_listeners: Object { l1529: {…}, l1532: {…}, l1534: {…}, … }
​
_listeningTo: Object { l1529: {…}, l1551: {…}, l1530: {…}, … }
​
_pending: false
​
_previousAttributes: Object { tagName: "...", type: "...", removable: true, … }
​
attributes: Object { tagName: "...", type: "...", removable: true, … }
​
ccid: "..."
​
changed: Object { attributes: {…} }
​
cid: "c1528"
​
collection: Object { length: 1, models: (1) […], _listenId: "l564", … }
​
config: Object { pStylePrefix: "gjs-", components: "........", stylePrefix: "....-", … }
​
em: Object { cid: "c2", _changing: false, _pending: false, … }
​
frame: undefined
​
opt: Object { add: true, remove: false, merge: false, … }
​
rule: Object { cid: "c1569", _changing: false, _pending: false, … }
​
view: Object { cid: "view1552", pfx: "gjs-comp-", ppfx: "gjs-", … }
​
viewLayer: Object { cid: "view1558", level: 1, ppfx: "gjs-", … }
​
views: Array [ {…} ]
​
<prototype>: Object { defaults: {…}, init: init(), constructor: r() }

[artf]

If it's necessary you can trigger rerender from the model in this way model.trigger('rerender')