与Knockoutjs和jCarouselLite合作

Question

很抱歉这样做，但是我需要看到Knockoutjs使用jCarouselLite的工作示例(请用jsFiddle )。我似乎不能让它起作用。关于这一点，我先前有一个问题：

Having trouble making Knockout and jCarouselLite to work

现在，我所做的就是在我的实际项目之外，赤裸裸地尝试它。下面是我的代码：

HTML：

    <h2>Index</h2>

    <div id="index-root">

        <div class="house-row" data-bind="slide: true">

            <div class=" house-row-nav"><a href="javascript:void(0)" id="item-prev"></a></div>
            <div class="house-row-nav"><a href="javascript:void(0)" id="item-next"></a></div>

            <ul data-bind="foreach: images">
                <li>
                    <div class="house-row-box nopadding-left nopadding-right">
                        <div class="image-wrapper">
                            <img data-bind="attr: { src: $data.image }" alt="image"><span data-bind="text: $data.image"></span>
                        </div>
                    </div>
                </li>
            </ul>

            <div class="clearfix"></div>

        </div>

    </div>

KOjs：

$(document).ready(function () {
    var model = new IndexViewModel();

    model.init();

    ko.applyBindings(model, document.getElementById("index-root"));
});

var IndexViewModel = function () {
    var self = this;

    self.images = ko.observableArray();
    //
    // Custom bindings
    //
    //ko.bindingHandlers.slide = {
    //    init: function (element) {            
    //    },
    //    update: function (element, valueAccessor) {
    //        $(element).jCarouselLite({
    //            btnNext: ".next",
    //            btnPrev: ".prev",
    //            visible: 3,
    //            speed: 1450,
    //            mouseWheel: true
    //        });
    //    }
    //};
    //
    // Methods
    //
    self.init = function () {

        self.images.push({
            image: "/Images/1.png"
        });

        self.images.push({
            image: "/Images/2.png"
        });

        self.images.push({
            image: "/Images/3.png"
        });

        self.images.push({
            image: "/Images/4.png"
        });

        self.images.push({
            image: "/Images/5.png"
        });


        //$(".house-row").jCarouselLite({
        //    btnNext: ".next",
        //    btnPrev: ".prev",
        //    visible: 3,
        //    speed: 1450,
        //    mouseWheel: true
        //});

    };
};

$(document).ready(function () {
    $(".house-row").jCarouselLite({
        btnNext: ".next",
        btnPrev: ".prev",
        visible: 3,
        speed: 1450,
        mouseWheel: true
    });
});

注释$(..house row).jCarouselLite..。还有ko.bindingHandlers.slide..。是我尝试初始化jCarouselLite的位置。

一根小提琴里的样本能帮我弄清楚这件事。

Answer 1

这是第一次尝试。我不得不将最初的调用放在计时器中，因为它在foreach绑定发生之前就被调用了，因此旋转木马没有任何内容。更高级的设计可能会将foreach绑定合并为slide的一部分。

安装调用在init部分中，因为它只发生一次。我在前面的线程中建议使用update部分，因为我认为需要处理旋转木马上的重复操作，并将其选择绑定到可观察的或其他方面。我们这里可不这么做。

​

ko.bindingHandlers.slide = {
  init: function(element) {
    setTimeout(function() {
      $(element).jCarouselLite({
        btnNext: ".next",
        btnPrev: ".prev",
        visible: 3,
        speed: 1450,
        mouseWheel: true
      });
    }, 0);
  },
  update: function(element, valueAccessor) {}
};


$(document).ready(function() {
  var model = new IndexViewModel();

  model.init();

  ko.applyBindings(model, document.getElementById("index-root"));
});

var IndexViewModel = function() {
  var self = this;

  self.images = ko.observableArray();
  //
  // Methods
  //
  self.init = function() {

    self.images.push({
      image: "/Images/1.png"
    });

    self.images.push({
      image: "/Images/2.png"
    });

    self.images.push({
      image: "/Images/3.png"
    });

    self.images.push({
      image: "/Images/4.png"
    });

    self.images.push({
      image: "/Images/5.png"
    });

  };
};

<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>
<script src="//rawgit.com/ganeshmax/jcarousellite/master/jquery.jcarousellite.min.js"></script>
<h2>Index</h2>

<div id="index-root">

  <div class="house-row" data-bind="slide: true">

    <button class="prev">&laquo;</button>
    <button class="next">&raquo;</button>


    <ul data-bind="foreach: images">
      <li>
        <div class="house-row-box nopadding-left nopadding-right">
          <div class="image-wrapper">
            <img data-bind="attr: { src: $data.image }" alt="image"><span data-bind="text: $data.image"></span>
          </div>
        </div>
      </li>
    </ul>

    <div class="clearfix"></div>

  </div>

</div>

​