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

我认为我分享了当我遇到这种需求时所做的事情，并希望找到一个干净的解决方案，这个解决方案不会与我的观点或视图模型混淆太多。我遇到了一个名为Just Add Water CSS的css框架。

动画不适用于较旧的浏览器，但我觉得花哨的UI无论如何都不行。但是框架的前提是定义了许多有用的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

Answer 3

有一个很好的例子here。

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

动画KnockoutJS模板更改

3 个答案: