Animating KnockoutJS模板更改

我正在使用动态模板名称。所以我不能根据一些选定的值更换模板。我想要做的是在渲染新的模板元素之前淡出（或用于该元素的任何动画）旧模板元素。如果你迭代一个列表而不是根模板本身，就有这个概念。有没有人试过这个或得到这个工作？Animating KnockoutJS模板更改

来源

2014-01-22 Matthew M. Osborn

你可以编写自己的绑定处理程序：

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/

来源

2014-01-22 08:42:20 sroes

我调整了它与文本绑定一起使用，并且需要在更新处理程序中使用'ko.unwrap（valueAccessor（））'，否则它将不会被调用。 – jdasilva

-1

有一个非常好的例子here。

你需要做的基本上是在渲染模板之前添加动画代码，你会看到他们如何创建一个自定义出价来调用动画代码，我认为你应该做类似的事情，如果你把你的代码的一个例子我可能能够帮助你更多。

来源

2014-01-22 01:04:04

请阅读我的文章：

你可以很容易的动画这样的模板：

<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来模拟模板更改。您链接的文章仅用于收集，也可以不是整个模板的数组。 –

我想我分享我做了什么，当我面对这个需要和想要一个干净的解决方案，并没有查询股价太多与我的观点或观看模型。我碰到一个叫做Just Add Water CSS的css框架。

动画在旧版浏览器上不起作用，但我猜想看起来好像UI并不是。但是框架的前提是定义了许多有用的css3动画类，您只需在需要时添加它们即可。完全发布的答案之前

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

来源

2014-01-22 13:33:43 XGreen

Animating KnockoutJS模板更改

回答

相关问题