Grapes JS how to fire custom component event function when model attributes changes

200 views Asked by At

Hi i'm making a custom plugin that needs to send two of it's attributes to a zustand context whenmy data-table-id trait(model attribute) changes. So far I've tried this approach:

const objectArrayEditor = (editor, options) => {
  editor.BlockManager.add("object-array-editor", {
    label: `<div class="gjs-block-label">Object Array Editor</div>`,
    attributes: { class: "fas fa-bars" },
    category: "Dynamic Form",
    content: `<div data-gjs-type="object-array-editor" data-custom-component="object-array-editor"></div>`,
  });

  const comps = editor.DomComponents;
  comps.addType("object-array-editor", {
    model: {
      defaults: {
        traits: [
          { name: "data-table-id", label: t`Table`, type: "table-chooser" },
        ],
      },
      init() {
        this.on("change:attributes:data-table-id", this.handleKeyChange);
      },
      handleKeyChange() {
        const view = this.getView();
        view && view.render();
      },
    },
    view: {component view}
 

  editor.on("component:update", model => {
    console.log('TABLE CHANGE:', 'options', options, 'model.getAttributes()', model.getAttributes() );
  });
};

export default objectArrayEditor;

As you can see at the final lines I'm listening to the editors component:update event in order to see if there's any update on the component but I would like to be more specific and listens if my data-table-id attribute has changed.

Is there any approach to do this ? I've tried with the component:update:{propertyName} event but it's not working.

0

There are 0 answers