Search code examples
ractivejs

RactiveJS decorator init issue

I am using a decorator for some sliders like the following:

content = new Ractive({
    el: '.wrapper',
    template: templates.wrapper,
    partials: templates,
    data : { ... },
    decorators: {
        carousel: function( node )
        {
            console.log( 'carousel init' );
            carousel = $( node ).owlCarousel({ 
                items: 1,
                navigation: false 
            });

            return {
                teardown: function () {
                    console.log( 'carousel destroy' );
                    carousel.trigger('destroy.owl.carousel').removeClass('owl-carousel owl-loaded');
                    carousel.find('.owl-stage-outer').children().unwrap();
                }
            }
        }
    }
}

What happens is that, as you can see in the logs, when swapping between a template which has inited the carousel to another template that has this decorator as well, the first decorator teardown is being triggered after the new template's decorator is initiated, therefore the carousel on the second template gets torn down and not the one in the first template.

enter image description here

Am I doing something wrong ? Thanks !

UPDATE

I have made a jsfiddle for it here : https://jsfiddle.net/05sq8o2k/6/

Make sure to tap load unsafe scripts if you get the warning because ractivejs cdn does not support https as far as I can see so jsfiddle kind of disagrees with it now.

Solution

  • This seems fixed in the next version of Ractive. Update your fiddle to use: https://cdn.ractivejs.org/edge/ractive.min.js

    Kind regards

    Bob