使用 Knockoutjs 和 jCarouselLite

Question

很抱歉，我很抱歉，但我需要看到一个使用 jCarouselLite 的 Knockoutjs 的工作示例（请在 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 的位置。

jsfiddle 中的示例确实可以帮助我清除这一点。

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>