GrapesJS / GrapesJS/components-lory

Extra content when add components in onRender

Open
#9 0 comments 0 reactions 0 assignees View on GitHub
Dominant language
JavaScript
Stars
27
Forks
29
PR merge metrics
No merged PRs in 30d

Description

Hi @artf,

Currently, I have to add some small components dynamically after user changes trait (eg: rewind, infinity, ...). My solution was add those by using onRender() method in Slider component. but the issue is when the Slider component re-render, it has extra components.

Here is a simple demo (for simplicity, I reset all components then add new ones):
![grapesjs-lory-slider](https://user-images.githubusercontent.com/20056992/71509601-74ff3100-28be-11ea-994e-4a1fe3f67138.gif)

And this is my change in `view` of Slider component:
```
view: defaultView.extend({
init() {
const props = [
'rewind'
];
const reactTo = props.map(prop => `change:${prop}`).join(' ');
this.listenTo(this.model, reactTo, this.render);
const comps = this.model.components();

// Add a basic template if it's not yet initialized
if (!comps.length) {
comps.add(`


${config.slideEls}


${config.prevEl}
${config.nextEl}`);
}
},

onRender() {
console.log('onRender', index);
if (index == 0) {
// ignore first render
} else {
const comps = this.model.components();
// comps.reset();
comps.add(`

Text ${index}

`);
}

index++;
}
})
```
I hope you have some solutions about this, thank you and happy holiday :D

Contributor guide

No contributing guide indexed for this repository

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.