Routes are not run in IE when navigating between links that are set directly in HTML and those added by knockout

jkells commented 9 years ago

When you have some links set directly in HTML and some bound to knockout properties navigating between them doesn't always work in IE. Both Firefox and Chrome work as expected.

I'm testing in IE11.

Here is an self explaining example of the problem:

Click the links in this order: 3, 2, 1, 2. In IE the final route is never run even though the URL hash changes

<!DOCTYPE html>
<html>
<head>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/sammy.js/0.7.4/sammy.min.js"></script>       
</head>
<body>
    <p>Click the links in this order: 3, 2, 1, 2. In IE the final route is never run even though the URL hash changes</p>
    <hr/>

    <a href="#/Page1">Page 1</a>
    <a href="#" data-bind="attr:{ href: page2Url}">Page 2</a>
    <a href="#" data-bind="attr:{ href: page3Url}">Page 3</a>

    <hr/>
    <strong><p data-bind="text: message"></p></strong>

    <script>
        var viewModel={
            message: ko.observable("initial page"),
            page2Url: "#/Page2",
            page3Url: "#/Page3"
        };

        Sammy(function(){
            this.get("#/Page1", function() {
                viewModel.message("You are on page 1");
            });

            this.get("#/Page2", function() {
                viewModel.message("You are on page 2");
            });

            this.get("#/Page3", function() {
                viewModel.message("You are on page 3");
            });

        }).run();   

        ko.applyBindings(viewModel);
    </script>
</body>
</html>

kunukn commented 9 years ago

The hashchange event is not invoked for page 1 for IE For more debug info add this at bottom

    <script>
    $(function() {
        $(window).on("hashchange", function() {
            console.log(location.hash + ' -> hashchange');
        });
    });
    </script>

This don't trigger the hashchange event for IE <a href="#/Page1">Page 1</a>

Workaround, use page1Url: "#/Page1", and <a href="#" data-bind="attr:{ href: page1Url}">Page 1</a>

jkells commented 9 years ago

Thanks kunukn, I did something similar as a workaround before posting the issue.

fotijr commented 9 years ago

Looks like this was fixed in 0.7.6 (b7019809302c87ea07f2d454d9c28855ea441cdf). Bug also documented here: https://github.com/quirkey/sammy/pull/183.

AJDray commented 8 years ago

This still seems to be a problem in 0.7.6 unfortunately. Just encountered it. The fix above sorted me out.

quirkey / sammy

Routes are not run in IE when navigating between links that are set directly in HTML and those added by knockout #239