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

评论 $（＆＃34; .house-row＆＃34;）。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>

使用Knockoutjs和jCarouselLite

1 个答案: