How to get JSSOR to work for Knockout's foreach binding?

Question

JSSOR is great for displaying a set of static images, but I cannot get it to play nice with Knockout's "foreach" binding, which is the typical case when the set of images is data-driven (not static). My list of images is an observable in my KO view model, e.g.

[
  {source: '/image1.jpg', caption: 'Image 1'},
  {source: '/image2.jpg', caption: 'Image 2'}
]

and my KO template looks like

<div id="slider1_container" style="position: relative; top: 0px; left: 0px; width: 600px; height: 300px;">
    <!-- Slides -->
    <div u="slides" style="cursor: move; position: absolute; overflow: hidden; left: 0px; top: 0px; width: 600px; height: 300px;">
        <!-- ko foreach: images --> 
        <div>
            <img u="image" data-bind="attr: {src: source}" />
            <div u="caption" data-bind="text: caption" style="position: absolute; bottom: 0px; left: 0px; width: 100%; color: #FFFFFF;" />
            </div>
        </div>
        <!-- /ko --> 
    </div>
    <!-- Navigator -->
    <div u="navigator" class="jssorb" style="bottom: 36px;">
        <div u="prototype"></div>
    </div>
    <!-- Arrow Left -->
    <span u="arrowleft" class="jssoral" style="left: 8px;"></span>
    <!-- Arrow Right -->
    <span u="arrowright" class="jssorar" style="right: 8px;"></span>
</div>

When I run this, I just see one image (the last one) and the Navigator just shows one box. I can see in the generated HTML that the "Foreach" is happening and that multiple slides are in fact rendered, just that JSSOR does not allow them to be stepped through. The captions are also not rendered.

Is JSSOR not compatible with Knockout? Is JSSOR processing the HTML before Knockout has a chance to generate the expanded HTML?

Answer 1

Please ensure the Knockout run before initialization of jssor slider.

//Run Knockout binding
...
//and then initialize jssor slider
var jssor_slider1 = new $JssorSlider$(...;