如何使用淘汰模板动态切换视图

Question

我正在为我们的Intranet开发数字标牌模块。我正在尝试将视频添加到组合中。我想先播放视频，然后再播放幻灯片。我最终将有这个循环。我首先调用startSequence函数，该函数从视频持续时间开始递减计数。您可以观察console.log（F12）。然后，将可观看的selectedTemplate从1更改为2，在播放视频后，我调用showSlides函数，但是我的视图没有检测到更改。这是jsFiddle

我需要一个可计算的可观测值吗？ -代替这个...

<div> <!-- ko if: $root.selectedTemplate() == 1 --> <div data-bind="template: { name: 'videoScript', foreach: $root.dynamicVideos() }"></div> <!-- /ko --> <!-- ko if: $root.selectedTemplate() == 2 --> <div data-bind="template: { name: 'imageScript' }"></div> <!-- /ko --> </div>

Answer 1

当前，您正在将字符串模板名称传递给模板绑定。

幸运的是，绑定还支持传递可观察的字符串甚至函数！您可以找到它的documentation on knockout's template page。

下面是使用计算的模板名称的示例：

const index = ko.observable(0);
const loop = () => index((index() + 1) % 2);

const activeTemplate = ko.pureComputed(() => 
  index() ? "t-slideshow" : "t-video"
);

ko.applyBindings({ activeTemplate });

setInterval(loop, 1000);

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>

<div data-bind="template: activeTemplate"></div>

<script type="text/html" id="t-slideshow">
  <h2>I'm a slide show! </h2>
</script>
<script type="text/html" id="t-video">
  <h2>I'm a video! </h2>
</script>