Question

我想构建一个自定义的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);
}};

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

Answer 1

如果我正确理解您的场景，那么问题是您填充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 };
    }
};

在这里小提琴：http://jsfiddle.net/rniemeyer/zGJX3/

Answer 2

我修改了其中一个淘汰教程，它虽然没有使用自定义绑定，但仍然通过挂钩到observableArray的beforeRemove和afterAdd驱动行为。

data-bind='template: { 
    foreach: planetsToShow,
    beforeRemove: hidePlanetElement,
    afterAdd: showPlanetElement 
}'

根据兼容性，你可以使用css3过渡，就像我在这里做的那样，给新添加的元素一个黄色，在给定的定时后转换为正常的颜色。（虽然我使用的时间和颜色需要工作;））

在这个小提琴中，似乎没有应用于原始列表，但我想这可能是在observableArray被修改的阶段？

http://jsfiddle.net/8k8V5/1529/

Knockoutjs使用afterAdd预习自定义绑定处理程序

2 个答案: