knockout.js - ビューではなく要素にデュランダル遷移を適用する方法は?

Question

ユーザーが追加/削除できる要素のリストがあります。ビュー全体ではなく、これらの個々の要素にトランジションを適用する方法の例を誰かが提供できますか?

Answer 1

これはデュランダル固有のものではなく、ノックアウトが処理するものです。

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 
}