猫头鹰旋转木马和knockout.js绑定foreach绑定

Question

他是大家,我知道这将是具体的问题,但我有一个问题,使用猫头鹰旋转木马与淘汰赛.

 <div class="row">
            <div id="owl-example" class="owl-carousel" data-bind="foreach: ads">
                <div class="ad-module">
                    <div data-bind="attr: { src: '/Content/images/' + Image }"></div>
                    <div data-bind="text: Title"></div>
                    <div data-bind="text: CityName"></div>
                    <div data-bind="text: CategoryName"></div>
                </div>
            </div>
        </div>

如果我删除owl-carousel课程,一切正常.如果我删除knockout foreach并手动输入图像一切正常.以前有没有人遇到过这个问题？谢谢.

Answer 1

foreach使用以下方法完成项目渲染后,可以调用特定函数:

<div data-bind="foreach: items, someOtherFunction">

您应该定义要调用的函数 ko.bindingHandlers

这是一个工作示例:

ko.bindingHandlers.owlCarouselInitiator = {
    init: function() {
    	$('.owl-carousel').owlCarousel({
          loop:true,
          nav:true,
          items : 3, 
      		itemsDesktop : [1000,3],
      		itemsDesktopSmall : [900,3],
      		itemsTablet: [600,3]
      })
    }
};

ko.applyBindings({
    items: ko.observableArray([
        "1",
        "2",
        "3",
        "4",
        "5",
        "6",
        "7",
        "9",
        "10"
    ])
});

body {
  margin: 0;
  padding: 0;
}
ul {
  margin: 0;
  padding: 0;
}
.owl-carousel .item {
  height: 120px;;
  background: #4DC7A0;
  padding: 1rem;
  list-style: none;
  margin: 10px;
}
.owl-carousel .item h4 {
  color: white;
  text-align: center;
  padding-top: 20px;
  font-size: 25px;
  line-height: 120px;
  margin: 0;
  padding: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.js"></script>

<ul class="owl-carousel" data-bind="foreach: items, owlCarouselInitiator">
    <li class="item"><h4 data-bind="text: $data"></h4></li>
</ul>