自定義綁定動畫不工作在foreach

Question

基本上我試圖讓一個數字淡出，改變和淡入。我使用了一個自定義綁定，正常工作的元素。但在一個foreach中，淡出動畫不起作用，數字就隱藏起來了。這是自定義綁定：

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'); 
     }); 
    }); 
    } 
}; 

工作實施例：http://jsfiddle.net/brunomuller/qTvs9/6/

第一個是一個foreach內，從陣列（失敗）獲取值，第二個被綁定的值本身（作品）。

任何想法爲什麼會發生這種情況？

Answer 1

你的計算有Value的間接的依賴，因爲你把它返回數組中之前，你執行它。這意味着每次更改Value時，整個陣列都會發生變化。這將導致該foreach重新評估，也可能爲它創建一個新的li。

如果計算數組中僅返回觀察到，一切按預期工作：

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>