Javascript 使用Sammy.js路由knockout.js应用程序和支持html4的历史记录

我刚开始玩sammy.js，我想做的第一件事就是测试历史是如何变化的。它的工作原理和预期的一样，甚至更好，但一旦我打开IE10并切换到IE9浏览器模式，一切都崩溃了。如果我没有用散列设置链接，IE9只会继续跟踪链接。当然，IE8也有同样的问题

目前，我只有这段与sammy相关的代码

App.sm = $.sammy('#content', function() {

    this.get('/', function(context) {
        console.log('Yo yo yo')
    });

    this.get('/landing', function(context) {
        console.log('landing page')
    });

    this.get('/:user', function(context) {
        console.log(context)
    });

});

和发起人

$(function() {
    App.sm.run('/');
});

我还研究了它，它包含三种类型的链接：普通链接、散列链接和普通链接，但在IE9和IE8上工作正常。这让我觉得，不知何故，让sammy.js同时支持html5历史和html4应该是可能的

所以我的问题是，我如何才能做到这一点

更新

我找到了在IE上工作的方法

我刚刚添加了以下代码片段：

this.bind('run', function(e) {
        var ctx = this;
        $('body').on('click', 'a', function(e) {
            e.preventDefault();
            ctx.redirect($(e.target).attr('href'));
            return false;
        });
    });

无论如何，我仍然有一个网站的入口问题，支持html5历史的浏览器总是被重定向到domain.com，不管最初的url是什么

所以我想知道我应该如何配置sammy.js以使其正常工作。或者任何人都可以推荐

---

其他一些路由器可以很好地与knockout.js配合使用。

原因有很多，包括搜索引擎蜘蛛和链接共享；您的站点应该在没有历史API的情况下工作。如果用户在您的网站上看到并希望向其他人展示红色贵宾犬，他们会复制链接。其他访问者需要能够在相同的URL上看到相同的内容；即使他们不是从主页开始

出于这个原因，我建议使用History API作为渐进式增强。在可用的地方，您应该使用它来提供更好的用户体验。在不可用的情况下，链接应正常工作

下面是一个示例路由器（如Sammy），如果history.pushState不可用，它只允许默认的浏览器导航

关于击倒部分；我在一个KnockoutJS项目中使用了它，效果很好

(function($){

    function Route(path, callback) {
        function escapeRegExp(str) {
            return str.replace(/[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g, "\\$&");
        }

        // replace "/:something" with a regular expression fragment
        var expression = escapeRegExp(path).replace(/\/:(\w+)+/g, "/(\\w+)*");

        this.regex = new RegExp(expression);
        this.callback = callback;
    }

    Route.prototype.test = function (path) {
        this.regex.lastIndex = 0;

        var match = this.regex.exec(path);

        if (match !== null && match[0].length === path.length) {
            // call it, passing any matching groups
            this.callback.apply(this, match.slice(1));
            return false;
        }

    };

    function Router(paths) {
        var self = this;
        self.routes = [];
        $.each(paths, function (path, callback) {
            self.routes.push(new Route(path, callback));
        });

        self.listen();
        self.doCallbacks(location.pathname);
    }

    Router.prototype.listen = function () {
        var self = this, $document = $(document);

        // watch for clicks on links
        // does AJAX when ctrl is not down
        // nor the href ends in .html
        // nor the href is blank
        // nor the href is /
        $document.ready(function(e){


           $document.on("click", "[href]", function(e){
               var href = this.getAttribute("href");

               if ( !e.ctrlKey && (href.indexOf(".html") !== href.length - 5) && (href.indexOf(".zip") !== href.length - 4) && href.length > 0 && href !== "/") {
                   e.preventDefault();
                   self.navigate(href);
               }
           });
        });

        window.addEventListener("popstate", function(e) {
            self.doCallbacks(location.pathname);
        });
    };

    Router.prototype.navigate = function(url) {
        if (window.history && window.history.pushState) {
            history.pushState(null, null, url);
            this.doCallbacks(location.pathname);
        }
    };

    Router.prototype.doCallbacks = function(url) {
        var routes = this.routes;

        for (var i=0; i<routes.length; i++){
            var route = routes[i];

            // it returns false when there's a match
            if (route.test(url) === false) {
                console.log("nav matched " + route.regex);
                return;
            }
        }

        if (typeof this.fourOhFour === "function") {
            this.fourOhFour(url);
        } else {
            console.log("404 at ", url);
        }
    };

    window.Router = Router;

}).call(this, jQuery);

router = new Router({
    "/": function () {

    },
    "/category/:which": function (category) {

    },
    "/search/:query": function(query) {

    },
    "/search/:category/:query": function(category, query) {

    },
    "/:foo/:bar": function(foo, bar) {

    }
});

router.fourOhFour = function(requestURL){

};