knockout.js - 带有 Knockout 自定义绑定(bind)的 Slick.js 轮播

Question

我想在 Knockout 中使用出色的光滑旋转木马 ( http://kenwheeler.github.io/slick/ )。在查看了其他一些问题(https://stackoverflow.com/questions/26368176/slick-js-carousel-not-working-with-knockout-template-binding)之后，似乎要走的路是使用自定义绑定(bind)，但我无法正确加载它 - 看起来光滑的轮播在DOM 已完全加载，因此它不会将最后一张幻灯片连接到第一张幻灯片。我也看了knockout js custom binding called after internal dom elements rendered并尝试使用子绑定(bind)上下文让自定义绑定(bind)强制子元素首先绑定(bind)。

这是 html 标记:

<div data-bind = "slick">
    <!-- ko foreach: results -->
      <div>
        <result-thumbnail params="result:$data"></result-thumbnail>
      </div>
    <!-- /ko -->
</div>

result-thumbnail 是一个单独的 knockout 组件，用于格式化我想在轮播中呈现的数据。在自定义绑定(bind)文件中:

ko.bindingHandlers.slick = {
init: function(element, valueAccessor, allBindingsAccessor, data, bindingContext) {
    var options = {
        infinite:true,
        slidesToShow: 3,
        slidesToScroll: 1,
    };

    var childBindingContext = bindingContext.createChildContext(
        bindingContext.$rawData, 
        null, 
        function(context) {
            ko.utils.extend(context, valueAccessor());
        });
    ko.applyBindingsToDescendants(childBindingContext, element);

    var local = ko.utils.unwrapObservable(valueAccessor());
    ko.utils.extend(options, local);
    $(element).slick(options);
    return { controlsDescendantBindings: true };
},
update: function(element, valueAccessor, allBindingsAccessor, data, context) {
  }
};

我正在考虑的几件事:- 我应该将光滑的初始化移动到更新功能吗？- 我编写的巧妙的自定义绑定(bind)是否需要绑定(bind)到不同的元素？- 如果我要更改 results observable 的值，我是否需要通过销毁然后重新创建轮播来更新 slick？

任何帮助将不胜感激!我仍在学习自定义绑定(bind)，如果有人有过让 slick carousel 与 Knockout 一起工作的经验，那也很高兴听到。

Answer 1

免责声明:我从未使用过 slick.js。

您认为轮播在 DOM 完全加载之前正在初始化是正确的。

如果您在 stackoverflow 上搜索，您会发现许多关于如何在所有元素都完成渲染后调用函数的选项 - 我最喜欢的选项如下所述:https://stackoverflow.com/a/19941134/3620458 .

一旦你有了这样的回调，你就可以使用它来将你的主 viewModel 中的一个 observable 设置为 true，就像这样:

var allElementsRendered = ko.observable(false);
var yourAfterRenderFunction = function () {
    allElementsRendered(true);
}

然后您可以将该可观察对象作为参数传递给您的“光滑”绑定(bind)，如下所示:

<div data-bind = "slick: allElementsRendered">

每当 allElementsRendered() observable 发生变化时，您的自定义绑定(bind)中的“更新”函数将被调用 - 所以只需将初始化逻辑移到那里，如下所示:

    update: function(element, valueAccessor, allBindingsAccessor, data, context) {
        var shouldInit = ko.unwrap(valueAccessor());

        if (shouldInit) {
            var options = {
                infinite:true,
                slidesToShow: 3,
                slidesToScroll: 1,
            };

            $(element).slick(options);
        } else {
            $(element).slick("unslick");
        }
    }

处理更新结果 observableArray 可能需要一些额外的工作 - 你可以做的是订阅它并在它发生变化时将 allElementsRendered() 设置为 false，如下所示:

var resultsSubscription = results.subscribe(function(newValue){
    allElementsRendered(false);
})

这与上面提到的 afterRenderFunction 相结合应该有望使您的旋转木马保持更新。