组件“首次渲染”事件

Question

嗨。我正在开发一个用chart.js图的插件。我需要在生成的组件中持久化图表模型，以便在背画布加载时渲染图表。为了实现这一点，我决定在组件的HTML署名中持久化图表模型。这是我配置图表后生成的组件 HTML（图表模型存储在属性“chartmodel”中）： ![捕捉 2018-09-10 as 09 28 51]（https://user-images.githubusercontent.com/7770605/45297543-1ac93980-b4dc-11e8-9bcf-cd33a74542de.png） 我的策略是，当组件首次渲染时，如果在组件的“chartmodel”属性内存在图表模型，那么图表会解析该属性的JSON字符串。如果没有“chartmodel”属性（当用户创建组件时），图表会使用组件核心的默认模型来渲染： “JavaScript view： defaultView.extend（{ init（） { const chartModelSaved = this.el.getAttribute（'chartmodel'）; if（chartModelSaved）{ t...

artf · Accepted Answer

你可以用“onRender” “''js view： defaultView.extend（{ // ... onRender（） { const chartModelSaved = this.el.getAttribute（'chartmodel'）; 如果（chartModelSaved） { this.model.set（'chartModel'， JSON.parse（chartModelSaved））; this.model.set（'chartType'， this.model.get（'chartModel'）.type） } 否则 { this.model.set（'chartModel'， JSON.parse（ChartDefaultData））; } } }) ```

gabrigcl · Answer

谢谢，这个方法有效！不过，我必须把图表模型存储在组件的 html 里，这样生成的模板才能在 grapesjs 编辑器之外渲染图表。我无法像我想要的那样，在组件的自定义 HTML 属性中持久化任何内容： '''html <canvas chartmodel=“{chartType： doughnut}”> ``` 我有什么解决方案来满足这种需求？

artf · Answer

@gabrigcl我不明白现在哪一个才是问题......我无法像我想要的方式在组件的自定义 HTML 属性中持久化任何东西 但这正是你之前帖子里展示的，试着详细说明你需要什么，哪些做不到，现场演示会更好。

组件“首次渲染”事件

问题

回答（3）

相关问答

自定义组件中的默认资产管理器

允许脚本时 Grapesjs 变为空

自定义HTML/JavaScript

组件的“添加”事件触发次数不同

与此问题匹配的付费插件

相关教程

🚀 介绍GrapesJS Email Blocky：GrapesJS 终极邮件块库

浏览插件分类