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

Question

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

我需要计算的 observable 吗？ - 而不是这个...

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