[QUESTION] How to update content prop from trait event

Question

Hello, I want to update the content property based on the changes from the trait

I have this component added

blockManager.add('bar-chart-block', {
        label: `<div>
                  <img src="dist/img/bar-chart.png" height="60px" width="60px">
                  <div class="my-label-block">Bar Chart</div>
                </div>`,
        category: 'Charts',
        attributes: {},
        content: {
          type: 'canvas-options',
          content: `<canvas></canvas>`,
          chartType: 'bar',
          script: function () {
            var ctx = this.children[0];

            new Chart(ctx, {
                type:  '{[ chartType ]}',
                
            });
          },
          style: {
            width:'400px'
          }
          
        }
      });

and notice I have a custom property chartType which is the one that I would be needing to update.

Here is the Trait that I created:

var domComps = editor.DomComponents;
      var dType = domComps.getType('default');
      var dModel = dType.model;
      var dView = dType.view;

      domComps.addType('canvas-options', {
          model: dModel.extend({
            defaults: Object.assign({}, dModel.prototype.defaults, {
              traits: [
                {
                  type: 'text',
                  label: 'Chart Type',
                  name: 'chartType',
                  changeProp: 1,
                },
                {
                  type: 'color',
                  label: 'Icon Color',
                  changeProp: 1,
                  name: 'iconColor'
                }
              ],
            }),
            init() {
              this.listenTo(this, 'change:chartType', this.doStuff);
            },
            updated(property, value, prevValue) {
              console.log('Local hook: model.updated', 'property', property, 'value', value, 'prevValue', prevValue);
            },
            doStuff() {
              console.log("adasd")
            }
          },
          {
            isComponent: function(el) {
              if(el.tagName == 'canvas-options'){
                return {type: 'canvas-options'};
              }
            },

          }),
          view: dView
      });

What I want to do is whenever the updated or doStuff event is called in the canvas-options it will update the prop chartType in the content of the component.

Is this possible? Thank you for anyone that could help me.

Answers (1)

artf• July 14, 20190 reactions

First of all, move all the props from block to the component to have something like this:

blockManager.add('bar-chart-block', {
	...
	content: { type: 'canvas-options' }
})

otherwise, you can face unexpected behaviors

What I want to do is whenever the updated or doStuff event is called in the canvas-options it will update the prop chartType in the content of the component.

To update the script in the canvas you should re-render the view

doStuff() {
 const view = this.getView(); 
 view && view.render();
}

[QUESTION] How to update content prop from trait event

Question

Answers (1)

Related Questions and Answers

[QUESTION] How to editable in innerHTML

Question: how to observe children changes in component

[QUESTION] - Bind inner text/html (like div, p, h1) to Trait

[Question] Adding script to content with chart js

Paid Plugins That Match This Issue

Browse Plugin Categories