如何让 JSSOR 为 Knockout 的 foreach 绑定工作？

Question

JSSOR 非常适合显示一组静态图像，但我无法让它与 Knockout 的“foreach”绑定配合得很好，这是一组图像是数据驱动（非静态）的典型情况。我的图像列表在我的 KO 视图模型中是可观察的，例如

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

我的 KO 模板看起来像

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

当我运行它时，我只看到一张图像（最后一张），而导航器只显示一个框。我可以在生成的 HTML 中看到“Foreach”正在发生并且实际上呈现了多张幻灯片，只是 JSSOR 不允许它们被单步执行。字幕也不会呈现。

JSSOR 与 Knockout 不兼容吗？ JSSOR 是否在 Knockout 有机会生成扩展的 HTML 之前处理 HTML？

Answer 1

请确保 Knockout 在 jssor 滑块初始化之前运行。

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