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

中定义

这是一个有效的例子：

＆＃13;

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"
    ])
});

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

Answer 2

如果在渲染视图后需要动态更改项目，可以使用https://github.com/OleksiiStepanov/KnockoutOwlCarousel2

中的自定义挖空绑定

用法示例：

<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回调在您的foreach呈现后运行初始化您的猫头鹰轮播。

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

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

3 个答案: