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。 / p>

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

1 个答案: