每个绑定中的Owl carousel和knockout.js绑定

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>

Answer 2

如果您需要在视图呈现后动态更改项，您可以使用来自https://github.com/OleksiiStepanov/KnockoutOwlCarousel2的自定义knockout绑定

使用例子:

<div class="owl-carousel owl-theme" data-bind="owlCarousel: {data: items, options:{margin:10, nav:true }}">
    <div class="item" data-bind="text: $data"></div>    
</div>

实时演示http://jsfiddle.net/s2reh01L/5/

Answer 3

你也可以使用afterRender回调来初始化你的owl carousel。

<ul data-bind="foreach: { data: myItems, afterRender: initOwlCarousel }">
    <li data-bind="text: $data"></li>
</ul>