如何使用新的 RactiveJS 数据重新初始化装饰器答案

【问题标题】：How to reinit decorator with new RactiveJS data如何使用新的 RactiveJS 数据重新初始化装饰器
【发布时间】：2016-01-25 10:27:50
【问题描述】：

我又来了一个非常有趣的问题。比如说，我有以下内容：

<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 不再控制那里的元素。

我不知道我解释的是否正确……希望你们能理解这里的问题。

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

所以我在想，我不必解开孩子，因为它什么都不做，只需调用destroy方法，像这样删除类：

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

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

希望我能让您了解问题所在。要点，如何正确实现owlCarousel 装饰器的过滤器，如何拆卸和重新渲染。

【问题讨论】：

标签： owl-carousel ractivejs

【解决方案1】：

可能发生的情况是，当您初始化 owl-carousel 时，插件会将您的 div.item 替换为它自己的 HTML 节点（或隐藏原始节点并附加新节点）。这就是为什么看起来 Ractive 不再能够控制 carousel 的原因。您可以做的也许是在 owl 项目级别编写一个装饰器。然后，对于这个项目装饰器，您可以使用 owl 的events API 动态添加或删除项目。例如，我看到add.owl.carousel 和remove.owl.carousel 这对于动态操作项目可能会派上用场。

您可以先尝试在不使用 Ractive 的情况下执行此操作：添加一个用于插入新项目的按钮和另一个用于删除项目的按钮。一旦你完成了机制（让猫头鹰开心），你就可以将它改编为 Ractive 装饰器。

另一种解决方案可能是将您的 <div decorator="carousel"> 移动到 Ractive 的 {{ # filteredUsers }} 循环中（即仅在第一项之前打印它，在最后一项之后打印结束标签）。这样，当filteredUsers 更改整个轮播节点及其子节点时，Ractive 将重新渲染，并且您的代码可能会开始进行一些额外的更改。

【讨论】：