4

カスタム bindingHandler を構築したい

afterAdd時にハイライト効果のあるko.bindingHandlers.foreachWithHighlight。

ドキュメントから

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 に最初にデータを入力する (バインド後) ときにハイライトが表示されることです。このようなシナリオを処理する 1 つの方法は、ハイライト効果の準備が整ったことを示すために、要素にフラグを使用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 に答える