自定义绑定动画不适用于foreach

Question

Basically I'm trying to make a number to fade out, change, and fade back in. I used a custom binding that works fine on a regular element. But inside a foreach the fade out animation won't work, the number just hides. This is the custom binding:

ko.bindingHandlers.slideTransition = {
  update: function(element, valueAccessor) {
    var value = valueAccessor();
    var valueUnwrapped = ko.utils.unwrapObservable(value);

    $(element).fadeOut('slow', function() {
        $(element).html(valueUnwrapped);       

        $(element).fadeIn('slow', function() {
            console.log('done');
        });
    });
  }
};

Working example: http://jsfiddle.net/brunomuller/qTvs9/6/

First one is inside a foreach, getting the value from an array (fails), second one is binding the value itself (works).

Any idea why this is happening?

Answer 1

Your computed has an indirect dependency on Value , since you execute it before you put it in the returned array. This means that every time the Value changes, your entire array changes. this will cause the foreach to re-evaluate, probably creating a fresh li for it too.

If you return just the observable in the computed array, things work as expected:

 var i = 0; function CartViewModel() { var self = this; self.Value = ko.observable(i); self.centsArray = ko.computed(function() { return array = [ self.Value ]; }); } ko.bindingHandlers.slideTransition = { update: function(element, valueAccessor) { var value = valueAccessor(); var valueUnwrapped = ko.utils.unwrapObservable(value); $(element).fadeOut('slow', function() { $(element).html(valueUnwrapped); $(element).fadeIn('slow', function() { console.log('done'); }); }); } }; var vm = new CartViewModel(); ko.applyBindings(vm); setInterval(function () { vm.Value(++i); }, 1000); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script> foreach (not working): <ul data-bind="foreach: { data: centsArray}"> <li><span data-bind="slideTransition: $data"></span></li> </ul> single (working): <ul> <li><span data-bind="slideTransition: Value"></span></li> </ul>