Question

Ok so I finally figured out which part of my code is causing the exception. You can read the initial post here. The code in the initial post is missing the part which is actually causing the exception (the manual subscription to the viewPortData observable). Apparently, I’m doing it wrong somehow… Here’s the code:

self.viewPortData = ko.observable();
self.viewPortData.subscribe(function (newValue) {
    var viewPort = $('#metro-view-port');
    if (viewPort && newValue) {
        self.fadeInOut(viewPort, newValue);
    }
});

self.fadeInOut = function (domObject, newContent) {
    if (newContent) {
        var currentContent = domObject.html();
        if (currentContent) {
            var wrappedContent = $(currentContent);
            wrappedContent.fadeOut(400, function () {
                wrappedContent.empty();
                domObject.html(newContent).hide().fadeIn(400);
            });
        } else {
            domObject.html(newContent).hide().fadeIn(400);
        }
    }
};

So where did I go wrong?

Answer 1

I created a fiddle using your code from this post and the previous post, and it works as it should.

However, I’m only returning a simple <div> tag to populate the HTML of the metro-view-port <div>.

My best guess is that the HTML that you’re returning is the problem.

My advice to you is to first confirm this by reducing the HTML returned to something very simple, and then gradually reintroduce the intended code until you find the problem.