带有 afterAdd 的 Knockoutjs foreach 自定义绑定处理程序答案

【问题标题】：Knockoutjs foreach custom bindinghandler with afterAdd带有 afterAdd 的 Knockoutjs foreach 自定义绑定处理程序
【发布时间】：2013-09-23 08:57:54
【问题描述】：

我想构建一个自定义的 bindingHandler

ko.bindingHandlers.foreachWithHighlight，afterAdd时有高亮效果。

From documentation

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

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

【问题讨论】：

你最初是否在绑定后填充你的 observableArray？（例如，绑定空的 observableArray 并在数据从 AJAX 请求返回时填充它）。

标签： knockout.js bindinghandlers

【解决方案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/

【讨论】：

【解决方案2】：

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

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

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

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

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

【讨论】：