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

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

不知道我解释的对不对，希望大家能理解这里的问题。

我的想法是我已经应用了一个过滤器，它得到了正确的计算，但是在 children 展开后出现的 html 结果不在 Ractive 的...保管中。它不属于 Ractive，它只是... html.

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

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

这是我想不通的部分..我怎么可能喜欢...重新初始化模板，或者，模板的那部分，或者，重新初始化装饰器本身，使其属于再次活跃。

希望我能让您了解问题所在。要点，我如何正确地为 owlCarousel 装饰器实现过滤器，如何拆卸和 re-render.

Answer 1

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

您可以先尝试在没有 Ractive 的情况下执行此操作：添加一个用于插入新项目的按钮和另一个用于删除项目的按钮。一旦你有了机制（让 owl 快乐），你就可以将其适应 Ractive 装饰器。

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

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

How to reinit decorator with new RactiveJS data

owl-carousel

ractivejs