admin管理员组

文章数量:1279155

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?

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?

Share Improve this question edited May 23, 2017 at 12:04 CommunityBot 11 silver badge asked Aug 26, 2012 at 17:46 KassemKassem 8,27618 gold badges77 silver badges119 bronze badges
Add a ment  | 

5 Answers 5

Reset to default 3

The same error occurred to me. The problem was caused because the HTML had ments on it. Something like:

<!-- Some Comment goes here -->
<div>
    ...
</div>

To fix that, without changing the HTML, you need to wrap the HTML with something else, so you pass only one element to jQuery:

var div = document.createElement( 'div' );
div.innerHTML = nativeHtml;

var $html = $( div );

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.

Flip your fadeIn(400) to a show().

It is simpler for jQuery to do the math for.... I think that it can't get puted style of the elements due to some floats inside it or something.

I had the same problem..... but after some research I got to here (DAMMET I LOST THE TAB - it was a jQuery bug report anyway ) and realised what needed to be fiddeled with to fix it.

In my code I swapped out fadeIn() to show() so it isn't to do with the animation

you would have thought that without the animation the problem wouldn't be prevalent either - but it is.

try slideDown(0 if your still after an animation, it might not work but its worth a pop.

This bug was in old versions of jQuery. Try to change .hide() to .css('display', 'none')

According to this jQuery bug, the problem may have to do with newline characters and whitespace text nodes in your HTML. In my case, I was taking a template like this one:

<script id="myTemplate" type="text/template">
  <div>
    <h2>Important stuff</h2>
  </div>
</script>

And parsing it like this:

var currentContent = $.parseHTML($('#myTemplate').html());

So I ended up with a bunch of text nodes representing the newline and whitespace characters in the original HTML template. Probably something similar has happened to you.

To fix this, I stripped out the newlines and whitespaces like so:

$('#myTemplate').html().replace(/\n/g, '').replace(/>\s+</g, '><').trim();

Hope that helps someone!

本文标签: