使用afterAdd的Knockoutjs foreach自定义绑定处理程序

user1199595 发表于 Dev

用户1199595

我想建立一个自定义的bindingHandler

ko.bindingHandlers.foreachWithHighlight在afterAdd时具有突出显示效果。

yellowFadeIn: function(element, index, data) {
        $(element).filter("li")
                  .animate({ backgroundColor: 'yellow' }, 200)
                  .animate({ backgroundColor: 'white' }, 800);
    },

但我想始终将此添加到我的valueAccessor中，并将其传递给foreach绑定。

ko.bindingHandlers.foreachWithHighlight = {
init: function (element, valueAccessor, allBindingsAccessor, viewModel, context) {
    return ko.bindingHandlers.foreach.init(element, valueAccessor, allBindingsAccessor, viewModel, context);
},
update: function (element, valueAccessor, allBindingsAccessor, viewModel, context) {
    var value = ko.unwrap(valueAccessor());
    var newValue = function () {
        return {
            data: value,
            afterAdd: function(element, index, data) {
             $(element).filter("li")
              .animate({ backgroundColor: 'yellow' }, 200)
              .animate({ backgroundColor: 'white' }, 800);
            }
        };
    };
    return ko.bindingHandlers.foreach.update(element, newValue, allBindingsAccessor, viewModel, context);
}};

添加服务器中的所有节点后，如何防止它第一次运行。我只希望它在添加新节点时运行。

RP尼迈耶

如果我正确地理解了您的情况，那么问题就在于您在填充observableArray的初始时间（绑定之后）会看到突出显示的内容。处理此类情况的一种方法是使用ko.utils.domData或$.data在元素上放置一个标志，以指示该元素现在已准备好突出显示效果。

就像是：

ko.bindingHandlers.foreachWithHighlight = {
    init: function (element, valueAccessor, allBindingsAccessor, viewModel, context) {
        return ko.bindingHandlers.foreach.init(element, valueAccessor, allBindingsAccessor, viewModel, context);
    },
    update: function (element, valueAccessor, allBindingsAccessor, viewModel, context) {
        var value = ko.unwrap(valueAccessor()),
            key = "forEachWithHightlight_initialized";

        var newValue = function () {
            return {
                data: value,
                afterAdd: function (el, index, data) {
                    if (ko.utils.domData.get(element, key)) {
                        $(el).filter("li")
                            .animate({
                            backgroundColor: 'yellow'
                        }, 200)
                            .animate({
                            backgroundColor: 'white'
                        }, 800);
                   }
                }
            };
        };

        ko.bindingHandlers.foreach.update(element, newValue, allBindingsAccessor, viewModel, context);

        //if we have not previously marked this as initialized and there are currently items in the array, then cache on the element that it has been initialized
        if (!ko.utils.domData.get(element, key) && value.length) {
            ko.utils.domData.set(element, key, true);
        }

        return { controlsDescendantBindings: true };
    }
};