quirkey/sammy

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

jkells opened this issue · 4 comments

jkells commented

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

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>

  • 👍1
jkells commented

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

fotijr commented

Looks like this was fixed in 0.7.6 (b701980). Bug also documented here: #183.

AJDray commented

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

  • 👍2