Working with Knockoutjs and jCarouselLite

Question

sorry to be this forward, but I need to see a working example of Knockoutjs working with jCarouselLite (in jsFiddle please). I can't seem to make it work. Here is an earlier question for me regarding this:

Having trouble making Knockout and jCarouselLite to work

Now, what I did was try it out bare bones outside of my actual project. Here is the code I have:

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

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

The commented $(".house-row").jCarouselLite... and ko.bindingHandlers.slide... are the locations I tried initializing jCarouselLite.

A sample in a jsfiddle would really help me clear this.

Answer 1

Here's a first stab at it. I had to put the initial call inside a timer because it was being called before the foreach binding had happened, so the carousel didn't have any contents. A more advanced design would probably incorporate the foreach binding as part of the slide.

The setup call is in the init section because it only happens once. I suggested the update section in your previous thread because I thought there would be a need to handle repeated actions on the carousel and bind its selection to an observable or something. We don't do that here.

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>