0

很抱歉，我很抱歉，但我需要看到一个使用 jCarouselLite 的 Knockoutjs 的工作示例（请在 jsFiddle 中）。我似乎无法让它工作。对于我来说，这是一个较早的问题：

使 Knockout 和 jCarouselLite 无法正常工作

现在，我所做的只是在我的实际项目之外尝试它。这是我的代码：

的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 中的示例确实可以帮助我清除这一点。

4

1 回答 1

0

这是第一次尝试。我不得不将初始调用放在计时器中，因为它是在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>

于 2015-07-23T11:45:09.677 回答