knockout.js - Slick.js carousel with Knockout custom binding -

i wanted use awesome slick carousel (http://kenwheeler.github.io/slick/) knockout. after looking @ of other questions (https://stackoverflow.com/questions/26368176/slick-js-carousel-not-working-with-knockout-template-binding) seems way go use custom binding, i'm having trouble getting load - seems slick carousel initializing before dom has loaded doesn't connect last slide first slide. looked @ knockout js custom binding called after internal dom elements rendered , trying use child binding contexts have custom binding force child elements bind first.

here html markup:

<div data-bind = "slick">     <!-- ko foreach: results -->       <div>         <result-thumbnail params="result:$data"></result-thumbnail>       </div>     <!-- /ko --> </div> 

result-thumbnail separate knockout component formats data wanted present in carousel. in custom bindings file:

ko.bindinghandlers.slick = { init: function(element, valueaccessor, allbindingsaccessor, data, bindingcontext) {     var options = {         infinite:true,         slidestoshow: 3,         slidestoscroll: 1,     };      var childbindingcontext = bindingcontext.createchildcontext(         bindingcontext.$rawdata,          null,          function(context) {             ko.utils.extend(context, valueaccessor());         });     ko.applybindingstodescendants(childbindingcontext, element);      var local = ko.utils.unwrapobservable(valueaccessor());     ko.utils.extend(options, local);     $(element).slick(options);     return { controlsdescendantbindings: true }; }, update: function(element, valueaccessor, allbindingsaccessor, data, context) {   } }; 

a few things considering: - should move slick initialization update function? - slick custom binding wrote need bound different element? - if changing value of results observable, need update slick destroying recreating carousel?

any appreciated! still learning custom bindings , if 1 has had experience getting slick carousel work knockout great hear too.

disclaimer: have never used slick.js.

you're right in thinking carousel initializing before dom has loaded.

if search on stackoverflow you'll find many options on how call function when elements have finished rendering - 1 best described here: https://stackoverflow.com/a/19941134/3620458.

once have such callback can use set observable in main viewmodel true, this:

var allelementsrendered = ko.observable(false); var yourafterrenderfunction = function () {     allelementsrendered(true); } 

you can pass observable parameter 'slick' binding, this:

<div data-bind = "slick: allelementsrendered"> 

whenever allelementsrendered() observable changes, 'update' function in custom binding called - move initialization logic there, this:

    update: function(element, valueaccessor, allbindingsaccessor, data, context) {         var shouldinit = ko.unwrap(valueaccessor());          if (shouldinit) {             var options = {                 infinite:true,                 slidestoshow: 3,                 slidestoscroll: 1,             };              $(element).slick(options);         } else {             $(element).slick("unslick");         }     } 

handling updating results observablearray may require additional work - can subscribe , set allelementsrendered() false time changes, this:

var resultssubscription = results.subscribe(function(newvalue){     allelementsrendered(false); }) 

this, combined above-mentioned afterrenderfunction should keep carousel updated.