Geek Answers Handbook

Knockoutjs foreach custom binding descriptor with afterAdd

I would like to create a custom bindHandler

ko.bindingHandlers.foreachWithHighlight, which has a highlight effect after adding.

From the documentation

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

But I want to always add this to my valueAccessor and pass it to the foreach binding.

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

How can I prevent it from starting when I first add all nodes from the server. I just want it to start when new nodes are added.

+4
source share
2 answers

, , , ( ), . 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/

+5

, , beforeRemove afterAdd, .

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

css3, , , . ( , , ;))

, , , , , , ?

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

0

More articles:


All Articles