knockout.js - 如何将 Durandal 过渡应用于元素而不是视图？

Question

我有一个用户可以添加/删除的元素列表。有人可以提供一个示例，说明如何将过渡应用于这些单独的元素，而不是整个视图？

Answer 1

这不是 Durandal 特有的，它是 Knockout 可以处理的：

http://knockoutjs.com/examples/animatedTransitions.html

忽略那些让您在 Knockout 之外摆弄 DOM 的答案。这就是KO可以帮助你的。

一个例子：

ko.bindingHandlers.animateForeach = {
        init: function(element, valueAccessor, allBindingsAccessor, viewModel) {
            return ko.bindingHandlers.foreach.init(element, valueAccessor, allBindingsAccessor, viewModel)
        },
        update: function(element, valueAccessor, allBindings, viewModel, context) {
            var value = ko.utils.unwrapObservable(valueAccessor())
            var newAccessor = function() {
                return {
                    data: value,
                    afterAdd: function(node) {
                        $(node).hide()
                        $(node).slideDown('fast')
                    },
                    beforeRemove: function(node) {
                    if (node.nodeType === 1) {
                        $(node).slideUp('fast', function() {
                            $(this).remove()
                        })
                    }
                }
                }
            }
            return ko.bindingHandlers.foreach.update(element, newAccessor, allBindings, viewModel, context)
        }
    }

Answer 2

假设您想使用同位素来添加或删除图像，然后您激活同位素内部

function viewActivate(){
    $("#container").isotope({
        layoutMode: "masonry",
        itemSelector: ".photo"
    });
}

您想用来添加或删除图像的任何 JavaScript 回调

function addRemoveImages(newimage)
{
    $("#container").isotope('insert', newimage); //This will cause isotope to re-animate only the content not the view 
}