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不兼容吗？在Knockout有机会生成扩展的HTML之前，JSSOR是否处理HTML？

Answer 1

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

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

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

1 个答案: