Issue #1414Opened September 10, 2018by gabrigcl0 reactions

[QUESTION] Component "first render" event

Question

Hi. I'm developing a plugin for charts using chart.js. I need to persist the model of the chart inside the generated component to render the chart on back canvas loads. In order to achieve this, I decided to persist the model of the chart in an HTML atribute of the component. This is the generated HTML of the component after I configure the chart (the model of the chart is stored in the attribute "chartmodel"):

captura de tela 2018-09-10 as 09 28 51

My strategy is, when the component is first rendered, if there is a chart model (inside the "chartmodel" attribute of the component), then the chart is rendered parsing the JSON string of this attribute. If there's no "chartmodel" attribute (when the component is being created by the user), the chart is rendered using a default model from the component's core:

view: defaultView.extend({
      init() {
        const chartModelSaved = this.el.getAttribute('chartmodel');
        if(chartModelSaved){
          this.model.set('chartModel', JSON.parse(chartModelSaved));
          this.model.set('chartType', this.model.get('chartModel').type)
        }
        else{
          this.model.set('chartModel', JSON.parse(ChartDefaultData));
        }
//...

However, when the init() method is called, I found out the component is not completely rendered, and the "chartmodel" attribute is not yet available. So, I have to do these operations to render the graphic from a model saved in an attribute of the component only when the component is completely rendered in the first time. My question is, is there an event or a hook to listen to only when the component is completely rendered the first time it's loaded in the canvas?

Answers (3)

artfSeptember 11, 20180 reactions

You can use onRender

view: defaultView.extend({
	  // ...
      onRender() {
        const chartModelSaved = this.el.getAttribute('chartmodel');
        if (chartModelSaved) {
          this.model.set('chartModel', JSON.parse(chartModelSaved));
          this.model.set('chartType', this.model.get('chartModel').type)
        } else {
          this.model.set('chartModel', JSON.parse(ChartDefaultData));
        }
	  }
})
gabrigclSeptember 14, 20180 reactions

Thanks, this method works! However, I have to store the model of the chart inside the html of the component, in order to make possible that the generated template render the chart outside the grapesjs editor. I can't persist anything inside a custom html attribute of the component, the way I want:

<canvas chartmodel="{chartType: doughnut}"> 

What solution do I have for this need?

artfSeptember 15, 20180 reactions

@gabrigcl I don't understand which is the problem now...

I can't persist anything inside a custom html attribute of the component, the way I want

But it's exactly what you've showed in your previous post, try elaborate better what you need and what you're not able to achieve, a live demo would be better.

Related Questions and Answers

Continue research with similar issue discussions.

Paid Plugins That Match This Issue

Curated by issue keywords and label relevance to help you ship faster.

View all plugins

Loading paid plugin recommendations...

Browse Plugin Categories

Jump directly to plugin category pages on the marketplace.