Как динамически переключать представления с помощью шаблонов Knockout - PullRequest
Новая
       16

Как динамически переключать представления с помощью шаблонов Knockout

0 голосов
/ 13 марта 2019

Я работаю над модулем цифровой рекламы для нашей интрасети. Я пытаюсь добавить видео в микс. Сначала я хочу воспроизвести видео, а затем запустить слайд-шоу У меня в конечном итоге будет этот цикл. Я начинаю с вызова функции 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>

1 Ответ

1 голос
/ 13 марта 2019

В настоящее время вы передаете имена строковых шаблонов в привязку шаблона.

К счастью, привязка также поддерживает передачу наблюдаемых строк или даже функций! Вы можете найти документацию на странице шаблона нокаута .

Вот пример использования вычисленного имени шаблона: 

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