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模板更改

回答

相關問題