Работа с 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 
    }); 
}); 

комментируемого $ ("Дом-рядная") jCarouselLite ... и ko.bindingHandlers.slide ... - это те места, которые я пытался инициализировать jCarouselLite.

Образец в jsfiddle действительно поможет мне понять это.

Answer 1

Вот первый удар по нему. Мне пришлось перенести начальный вызов внутри таймера, потому что он вызывался до того, как произошло переполнение связи , поэтому у карусели не было никакого содержимого. Более продвинутый дизайн, вероятно, будет включать привязку 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>