Анимация НокаутJS изменение шаблона

Question

Я использую динамическое имя шаблона. Поэтому я не могу изменить шаблон на основе некоторых выбранных значений. То, что я хотел бы сделать, - это постепенное исчезновение (или любая анимация для этого матера) старых элементов шаблона перед рендерингом нового. Существует эта концепция, если вы повторяете список, но не для самого корневого шаблона. Кто-нибудь пробовал это или получил это на работу?

Answer 1

Вы можете написать свой собственный обработчик переплета:

ko.bindingHandlers.fadeTemplate = { 
    init: function(element, valueAccessor, allBindings, viewModel, bindingContext) { 
     return ko.bindingHandlers['template']['init'](element, valueAccessor, allBindings); 
    }, 
    update: function(element, valueAccessor, allBindings, viewModel, bindingContext) { 
     var value = valueAccessor(); 
     $(element).fadeOut(function() { 
      ko.bindingHandlers['template']['update'](element, valueAccessor, allBindings, viewModel, bindingContext); 
      $(this).fadeIn(); 
     }); 
    } 
}; 

http://jsfiddle.net/xP7uy/

Answer 2

Существует действительно хороший пример here.

Что нужно сделать в основном, это добавить код анимации перед визуализацией шаблона, вы увидите, как в примере они создают пользовательские ставки для вызова кода анимации, я думаю, вы должны сделать что-то подобное, если вы положите пример вашего кода, я мог бы помочь вам больше.

Answer 3

Я думал, поделиться тем, что я сделал, когда я столкнулась с необходимостью для этого и хотел чистое решение, которое не Mixup слишком много с моими взглядами или viewmodels. Я наткнулся на фреймворк css под названием Just Add Water CSS.

Анимация не работает на старых браузерах, но я думаю, что пользовательский интерфейс не имеет никакого значения. Но предпосылка рамки заключается в том, что многие полезные классы анимации css3 определены, и вы просто добавляете их по мере необходимости.

Вы можете анимировать шаблоны, как это очень легко:

<button data-bind="click: toggleTemplate">Toggle template</button> 

<ul id="container" data-bind="template: { name: templateToUse, foreach: items }"> 

</ul> 

<script type="text/html" id="myTemplate1"> 
    <li data-bind="text: $data" class="animated fadeInLeft"></li> 
</script> 
<script type="text/html" id="myTemplate2"> 
    <li class="animated fadeInLeft" >Value is: <span data-bind="text: $data"></span></li> 
</script> 

И Vm моделировать изменения шаблона:

function vm(){ 
    var self = this; 
    self.items = ko.observableArray([1,2,3,4,5,6]); 
    self.templateSwitch = ko.observable(false); 
    self.toggleTemplate = function(){ 
     self.templateSwitch(!self.templateSwitch()); 
    } 
    self.templateToUse = function(){ 
     return self.templateSwitch() ? "myTemplate2" : "myTemplate1"; 
    } 
} 

ko.applyBindings(new vm()); 

Here is also a fiddle