How to dynamically switch views using Knockout templates - templates

Question

I'm working on a digital signage module for our intranet. I'm trying to add videos into the mix. I want to play videos first, then play a slide show. I will eventually have this loop. I start by calling the startSequence function, which counts down from the video duration. You can observe the console.log (F12). Then I'm changing the selectedTemplate observable from 1 to 2 , after the videos have played I call the showSlides function, but my view is not detecting the change. Here's a jsFiddle
Do I need a computed observable? -instead of this...
<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

Currently, you're passing string template names to the template binding.
Fortunately, the binding also supports passing observable strings, or even functions! You can find its documentation on knockout's template page.
Here's an example using a computed template name:
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>