Question

I want to implement this simple animation in knockout:

function scroll(back) {
    var scrollContainer = $('.scrollingContent');
    var newContent = $("<div class='content'></div>");
    var oldContent = scrollContainer.children().first();
    newContent.css("width", "50%");
    var contentSize = oldContent.width();
    var newContentColor = oldContent.css("background-color") == "rgb(255, 0, 0)" ? 
                                                                "green" : "red";
    newContent.css("backgroundColor", newContentColor);
    if (back) {
        newContent.css("margin-left", -contentSize);
        scrollContainer.prepend(newContent);
        newContent.animate({ "margin-left": 0 }, 600, 
        function () { oldContent.remove(); });
    } else {
        scrollContainer.append(newContent);
        oldContent.animate({ "margin-left": -contentSize }, 600, 
        function () { oldContent.remove(); });
    }
}

Example can be looked at here: http://jsfiddle.net/VMx3j/106/

I’ve read a lot about custom bindings, but I still can’t understand how to do it right.

I had just two ideas. First was to create an foreach array and to bind on afterRender, afterAdd, or beforeRemove. But will it be correct? I think the code in this case won’t be enough understandable and it will be very hard to change anything. Also another idea was to create a custom binding. But as far as I understood this approach works only with one element, and I need access to at least two of them.

Also notice that content element is template (that is constantly changed by this animation).

Please help if you have any ideas about it.

Answer 1

Here is the correct answer:

this.afterElementAdd = function(element) {
    if (element.nodeType === 1) {
        var el = $(element);
        if (el.next().length != 0 && el.prev().length == 0) {
            el.animate({ "margin-left": "0" }, 300, function () {
                self.contents.pop();
            });
        }
        else if (el.prev().length != 0 && el.next().length == 0) {
            el.prev().animate({ "margin-left": -el.width() }, 300, function () {
                self.contents.shift();
            });
        }
    }
};