Question

我再次提出了一个非常有趣的问题。比方说，我有以下内容：

<div decorator="carousel">
   {{ # filteredUsers }} // computed value from users array and a filter input
      <div class="item">{{ name }}</div>
   {{ / }}
</div>

使用owlCarousel 2作为装饰器，如下所示：

decorators: {
    carousel: function( node )
    {

        var owl = $( node );
        owl.owlCarousel({
            items: 1,
            loop: $( node ).children().length > 1 ? true : false,
            autoplay: true,
            autoplayTimeout: 3000,
            autoplaySpeed: 500,
            dots: false
        });

        return {
            update: function( )
            {
                owl.data('owlCarousel').destroy();
                owl.removeClass('owl-carousel owl-loaded');
                owl.find('.owl-stage-outer').children().unwrap();

                // carousel destroyed
                // reinit carousel

            },
            teardown: function () {
                owl.data('owlCarousel').destroy();
                owl.trigger('destroy.owl.carousel').removeClass('owl-carousel owl-loaded');
                owl.find('.owl-stage-outer').children().unwrap();
            }
        }
    }
}

重新启动轮播时的问题是，当我这样做时：

owl.find('.owl-stage-outer').children().unwrap();

我基本上得到了开头滑块中的所有结果，而不是应用过滤器的新计算结果（即使计算出的数组是正确的）ractive也不能控制那里的元素。< / p>

我不知道我是否正确解释了这一点，希望你们能在这里理解这个问题。

我的想法是我已经应用了一个过滤器，它可以正确计算，但是在解开子项后出现的html结果不在Ractive的监护下。它不属于Ractive，它只是...... html。

所以我想，我不需要打开孩子，因为它没有做任何事情，只需调用destroy方法，删除这样的类：

owl.data('owlCarousel').destroy();
owl.removeClass('owl-carousel owl-loaded');

这是我无法弄清楚的部分..我怎么可能喜欢...重新初始化模板，或者模板的那一部分，或者重新初始化装饰器本身，使它再次属于ractive

希望我能让你明白这是什么问题。要点是，如何正确实现对owlCarousel装饰器的过滤，如何拆卸和重新渲染。

Answer 1

可能会发生的情况是，当您初始化猫头鹰轮播时，插件会用自己的HTML节点替换您的div.item（或者隐藏原始节点并添加新节点）。这就是为什么它看起来像Ractive不再控制旋转木马的原因。你可以做的就是在猫头鹰项目级别写一个decorater。然后，对于此项目装饰器，您可以使用猫头鹰events API动态添加或删除项目。我看到例如add.owl.carousel和remove.owl.carousel，它们可以方便动态操作项目。

您可以先尝试在没有Ractive的情况下执行此操作：添加一个将插入新项目的按钮，另一个用于删除一个项目。一旦你掌握了机械技术（让猫头鹰开心），你就可以将它调整为Ractive装饰器。

另一种解决方案可能是将<div decorator="carousel">移到Ractive的{{ # filteredUsers }}循环内（即在第一项之前打印它，在最后一项之后打印结束标记）。这样，当filteredUsers更改整个轮播节点时，其子节点将由Ractive重新呈现，您的代码可能会开始处理一些其他更改。

如何使用新的RactiveJS数据重新启动装饰器

1 个答案: