[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"):

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)
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));
}
}
})
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?
@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.
Issue #1459
[QUESTION] How to store "data-" attributes into the html tag of the component
Hi, I'm developing a plugin for charts using chart.js. In order to the generated template render the chart from a data model generated by t...
Issue #1355
[QUESTION] Component resize event
I have a canvas component and I need to be able to register resize events for it. After diving trough the code and looking for relevant mod...
Issue #1888
[Question] Add custom html inside canvas
Hi there, I'm using grapes to export a custom json with all the information i need, instead of HTML and CSS. For doing that I'm parsing the...
Issue #1255
[QUESTION]: How to set editor html contents from custom component?
I'm having trouble getting a custom block+component to display its template HTML inside the grapes editor. Within the exported HTML, the ma...
Paid Plugins That Match This Issue
Curated by issue keywords and label relevance to help you ship faster.
Loading paid plugin recommendations...
Browse Plugin Categories
Jump directly to plugin category pages on the marketplace.