4

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

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

4

2 回答 2

5

如果我正确理解了您的情况，那么问题是您填充 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/

于 2013-09-23T13:09:21.463 回答
0

我已经修改了其中一个淘汰教程，尽管它没有使用自定义绑定，但仍然通过哪个钩子来驱动行为，beforeRemove并将afterAdd其钩入 observableArray。

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

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

在这个小提琴中，它似乎通过不应用于原始列表来工作，但我想这可能取决于 observableArray 在什么阶段被修改？

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

于 2013-09-23T13:03:22.253 回答