单击渲染骨干视图（通过路由器推送状态）

我有一个3页的应用程序，我试图点击。 第一页是登录页面。 其他两个应该在单击链接时呈现。 它们都包含在同一个容器div＃modal-content中

我的HTML如下：

 
 
 
  
 
 Sign Up Log In 
 
 
  

我的路由器function如下：

 var Approuter = Backbone.Router.extend({ initialize: function() { console.log('router initialized'); Backbone.history.start({ pushState: true }); }, routes: { '': 'main', 'signup-page' : 'signup', 'login-page' : 'login' }, main: function() { this.landing = new LandingView({ el: $('#modal-content') }); slider.slidePage(this.landing.$el); }, signup: function() { this.signuppage = new SignUpView({ el: $('#modal-content') }); console.log("LANDING VIEW: Signup clicked"); }, login: function() { this.loginpage = new LoginView({ el: $('#modal-content') }); console.log("LANDING VIEW: Login clicked"); } }); 

视图文件如下：

 var SignUpView = Backbone.View.extend({ initialize: function() { this.render(); }, render: function() { var template = Handlebars.compile($('#signUpPage').html()); this.$el.html(template); }, }); 

和

 var LoginView = Backbone.View.extend({ initialize: function() { this.render(); }, render: function() { var template = Handlebars.compile($('#loginPage').html()); this.$el.html(template); }, }); 

另外，这是我的模板：

 
  
 
 
  
 
 Sign Up Log In 
 
 
   
 
 Back 
 
 
  
 
    Sign Up 
 
 
   
 
 Back 
 
 
  
 
   Log In 
 
 
   

我的问题单击#regup-page或#login-page链接后，我可以看到url更改为“localhost /＃signup-page”，但视图未呈现。

但是当我在localhost / #regup-page或localhost /＃login-page刷新页面时，我看到了视图的呈现。

我哪里错了？

Answer 1

请看一下上面的代码：

   
 routeOne 







































































































 routeTwo 
 
       

Edit1：Routes和pushState之间的差异

Backbone Routes使您能够监视hasChange历史事件（url中的更改）并在url（ http://localhost/backbone-test/#someRoute ）发现一些更改时触发一些js代码，这太棒了，因为我们可以触发一些复杂的操作用户在您的网站上，只需要调用url。

pushState使您能够隐藏这个’＃’哈希并使您的URL更具可读性，但正如骨干文档所述

“如果您的路径为/ documents / 100，那么如果浏览器直接访问该url，您的网络服务器必须能够提供该网页。”

然后，如果你使用pushState:true你的url变得更易读， http://localhost/backbone-test/#someRoute到http://localhost/backbone-test/someRoute但是你需要创建一个后端来直接回答访问你可读的url。

当pushState为true并且您调用href="#someRoute" ，浏览器href="#someRoute"其理解为html锚点。