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

Question

我正在为我们的内部网工作一个数字标牌模块。我正在尝试添加视频。我想先播放视频，然后播放幻灯片。我最终会有这个循环。我首先调用startSequence函数，该函数从视频持续时间开始倒计时。您可以观察console.log（F12）。然后我将selectedTemplate observable从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>