Extra content when add components in onRender

[longdoan7421]

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

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(`<div data-gjs-type="${frameName}">
              <div data-gjs-type="${slidesName}">${config.slideEls}</div>
          </div>
          <span data-gjs-type="${prevName}">${config.prevEl}</span>
          <span data-gjs-type="${nextName}">${config.nextEl}</span>`);
        }
      },

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

        index++;
      }
})

I hope you have some solutions about this, thank you and happy holiday :D