幻灯片的 Knockout.js 自定义绑定：图像未显示

Question

我正在构建带有上一个和下一个按钮的图像幻灯片。图像是从 json 对象中获取的。使用<img data-bind="attr: { src: images } /> 时图像显示正常，没有任何问题，但一旦我应用return { controlsDescendantBindings: true }，图像就会停止显示。 <img data-bind="attr: { src: images } /> 上的数据绑定不再起作用。

你知道发生了什么吗？

非常感谢

HTML：

<!-- carousel -->
<div class="carousel" data-bind="carousel: true">
    <div class="controls">
        <a href="#" class="prev">Prev</a>
        <a href="#" class="next">Next</a>
    </div>
    <div class="viewport">
        <!-- trip() represent the json object, but it's confidential -->
        <ul data-bind="foreach: trip().boat.decks">
            <li><a href="#"><img class="image" data-bind="attr: { src: images }" /></a></li>
        </ul>
    </div>
 </div>
 <!-- carousel -->

淘汰赛/JS：

// binding for carousel
ko.bindingHandlers.carousel = {
    init: function (element, valueAccessor) {
        var $carousel = $(element),
            $viewport = $carousel.find('.viewport'),
            $controls = $carousel.find('.controls'),
            $prev = $controls.find('.prev'),
            $next = $controls.find('.next'),
            $slideList = $viewport.find('ul'),
            $slide = $slideList.find('li');

        console.log('carousel starting...');
        console.log('what is element: ', element);
        console.log('what is $element: ', $(element));

        // put active on 1st slide
        $slide.first().addClass('active');

        //TODO: prev btn
        $carousel.on('click', '.prev', function (e) {
            e.preventDefault();

            console.log('Prev btn carousel clicked!');

            $viewport.find('.active').removeClass('active').prev().addClass('active');

            // if arrived at 1st slide, start again from last slide
            if ($viewport.find('.active').index() < 0) {
                $slide.first().removeClass('active');
                $slide.last().addClass('active');
            }
        });

        //TODO: next btn
        $carousel.on('click', '.next', function (e) {

            e.preventDefault();

            console.log('Next btn carousel clicked!');

            $viewport.find('.active').removeClass('active').next().addClass('active');

            // if arrived at last slide, start again from 1st slide
            if ($viewport.find('.active').index() < 0) {
                $slide.last().removeClass('active');
                $slide.first().addClass('active');
            }
        });

        return {
            controlsDescendantBindings: true
        };
    }
};

Answer 1

当您返回 controlsDescendantBindings: true 时，您告诉 Knockout 不要对子元素执行绑定，这就是不绑定子元素的原因。 documentation on creating custom bindings that control descendant bindings 声明：

通常，使用 controlsDescendantBindings 的绑定还将调用 ko.applyBindingsToDescendants(someBindingContext, element) 以将后代绑定应用于某些修改后的绑定上下文。

但是，在您的情况下，您永远不会调用 ko.applyBindingsToDescendants，因此 Knockout 永远不会绑定子元素。

我不确定您为什么首先尝试控制后代绑定，但如果您希望 Knockout 绑定子元素，您需要删除它或确保调用您 ko.applyBindingsToDescendants。