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

Question

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

我需要计算可观察量吗？ - 而不是这个...

<div>  <div data-bind="template: { name: 'videoScript', foreach: $root.dynamicVideos() }"></div>   <div data-bind="template: { name: 'imageScript' }"></div>  </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>

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

How to dynamically switch views using Knockout templates

templates

duration

digital

knockout.js