使用Sammy.js和具有html4支持的歷史記錄路由knockout.js應用程序

Question

我剛開始玩sammy.js，我想要做的第一件事就是測試歷史更改的工作原理。它可以像預期的那樣工作，甚至更好，但是一旦我打開IE10並切換到IE9瀏覽器模式，一切都會分開。如果我沒有使用散列設置鏈接，那麼IE9會繼續跟蹤鏈接。當然與IE8同樣的問題。

此時此刻我唯一有此位的代碼與薩米

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 history和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很好地工作。

Answer 1

由於多種原因，包括搜索引擎蜘蛛和鏈接共享;您的網站應該沒有歷史API。如果用戶看到http://example.org/poodles/red並想在您的網站上向其他人展示紅色貴賓狗，他們會複製該鏈接。其他訪問者需要能夠在相同的URL中看到相同的內容;即使他們沒有從主頁開始。

由於這個原因，我建議使用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){ 

};