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。

如果只返回计算数组中的 observable ，事情就会按预期工作：

＆＃13;

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

＆＃13;

<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>

＆＃13;

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

1 个答案: