Knockoutjs - Переходы между динамическим переключением шаблонов?

Question

KnockoutJS действительно здорово использовать до сих пор, но я новичок в фреймворке. Я пытаюсь создать интерфейс с вкладками, например. 4 ссылки и общая область отображения. Нажатие на ссылку использует систему шаблонов для нокаутов и переключит шаблон. Это отлично работает, но я хочу добавить некоторую анимацию между переходом шаблона.

Как это сделать? Я немного читал об этом раньше, чем в Remove/afterAd, но это, похоже, применимо только к наблюдаемым массивам. Я знаю, что KnockoutJS поддерживает анимацию/пользовательские привязки (я использую их более прямо для других элементов на моей странице).

Если мой весь подход неверен, есть ли лучший способ сделать интерфейс с вкладками, чтобы легко получить переходы?

Вот мой код прямо сейчас.

HTML-:

<div class="Page"> 
    <span data-bind="template: {name: current_page()}"></span> 
</div> 
<script type="text/html" id="Home"> 
    <!-- Home content --> 
</script> 
<script type="text/html" id="Tab1"> 
    <!-- Tab1 content --> 
</script> 

Javascript (KNOCKOUT в ViewModel):

this.current_page = ko.observable("Home") 
//later on... 
this.current_page("Tab1"); 

Answer 1

Вы можете использовать afterRender свойство template binding:

<span data-bind="template: {name: current_page(), afterRender: animatePageChange }"></span> 

.., а затем на ваша модель просмотра вы можете добавить любую анимацию, которую вы представляете:

animatePageChange: function() { $('#content').hide(); $('#content').fadeIn(3000); } 

Я поставил вместе простой демо на http://jsfiddle.net/unklefolk/v3JMS/1/