Question

我刚刚开始玩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('/');
});

我还看了这个example，它包含三种类型的链接，普通链接，哈希和正常链接，但在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，无论什么是初始网址。

所以我想知道我应该如何配置sammy.js来工作。或许任何人都可以推荐一些其他路由器可以很好地与knockout.js一起使用。

Answer 1

出于多种原因，包括搜索引擎蜘蛛和链接共享;您的网站应该没有历史记录API。如果用户看到http://example.org/poodles/red并希望在您的网站上向其他人显示红色贵宾犬，则会复制该链接。另一位访问者需要能够在同一网址上看到相同的内容;即使他们没有从主页开始。

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

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

关于Knockout部分;我在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){

};

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

1 个答案: