單擊時渲染骨幹視圖（通過路由器推送狀態）

我有一個應用程序，有3個頁面，我試圖在點擊時呈現。第一頁是着陸頁。另外兩個應該在點擊一個鏈接時被渲染。它們都包含在同一個容器DIV＃模式內容單擊時渲染骨幹視圖（通過路由器推送狀態）

我的HTML是內部如下：

<script type="text/x-handlebars-template" id="landingPage"> 
    <div> 
     <div class="auth-wrapper"> 
      <div class="logo"> 
       <img src="img/login/logo-landing.png"/> 
      </div> 
      <div class="to-auth-buttons-wrapper"> 
       <a class="btn-to-auth btn-login" href="#signup-page">Sign Up</a> 
       <a class="btn-to-auth btn-signup" href="#login-page">Log In</a> 
      </div> 
     </div> 
    </div> 
</script>

我的路由器功能如下：

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); 
    }, 
});

此外，這裏是我的模板：

<div id="modal-content"> 

    <script type="text/x-handlebars-template" id="landingPage"> 
     <div> 
     <div class="auth-wrapper"> 
      <div class="logo"> 
       <img src="img/login/logo-landing.png"/> 
      </div> 
      <div class="to-auth-buttons-wrapper"> 
       <a class="btn-to-auth btn-login" href="#/signup-page">Sign Up</a> 
       <a class="btn-to-auth btn-signup" href="#/login-page">Log In</a> 
      </div> 
     </div> 
     </div> 
    </script> 

    <script type="text/x-handlebars-template" id="signUpPage"> 
     <div> 

     <div class="header"> 
      <a href="#" class="btn">Back</a> 
     </div> 
     <div class="auth-wrapper"> 


      <div class="logo"> 
       <img src="img/login/logo-landing.png"/> 
      </div> 

      <form method="post" id="userSignUp">  
       <input class="form-control input-signin" type="text" name="username" placeholder="Name" id="userName"> 
       <input class="form-control input-signin" type="text" name="useremail" placeholder="Email" id="userEmail"> 
       <input class="form-control input-signin" type="text" name="userpass" placeholder="Password" id="userPassword"> 

       <a class="btn-to-auth btn-login js-btn-login">Sign Up</a> 
      </form> 
     </div> 

     </div> 
    </script> 

    <script type="text/x-handlebars-template" id="loginPage"> 
     <div> 
     <div class="header"> 
      <a href="#" class="btn">Back</a> 
     </div> 
     <div class="auth-wrapper"> 


      <div class="logo"> 
       <img src="img/login/logo-landing.png"/> 
      </div> 

      <form method="post" id="userSignIn">  
       <input class="form-control input-signin" type="text" name="useremail" placeholder="Email" id="userEmail"> 
       <input class="form-control input-signin" type="password" name="userpass" placeholder="Password" id="userPassword"> 
       <a class="btn-to-auth btn-login js-btn-login">Log In</a> 
      </form> 
     </div> 

     </div> 
    </script> 

</div>

我的問題 在點擊一個＃註冊頁面或＃登錄頁的鏈接，我可以看到網址變更爲「localhost/＃註冊頁面「，但視圖不被渲染。

但當我刷新頁面位於localhost /＃註冊頁面或本地主機/＃登錄頁，我看到的視圖渲染。

我哪裏錯了？

來源

2013-09-24 iggy2012

嘗試將'pushState'設置爲'false' –

嗯..似乎現在是一個下劃線問題... – iggy2012

請看看上面的代碼：

<html> 

    <body> 
     <div class="action"> 
      <a name="routeOne" href="#routeTwo">routeOne</a> 
      <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> 
      <a name="routeTwo" href="#routeOne">routeTwo</a> 
     </div> 
     <div class="output"></div> 


     <script type="text/javascript" src="lib/jquery.js"></script> 
     <script type="text/javascript" src="lib/underscore.js"></script> 
     <script type="text/javascript" src="lib/backbone.js"></script> 

     <script type="text/javascript"> 
      var Approuter = Backbone.Router.extend({ 
       initialize: function() { 
        console.log('router initialized'); 
        Backbone.history.start({pushState:true}); 
       }, 

       routes: { 
        '': 'main', 
        'routeOne' : 'routeOne', 
        'routeTwo' : 'routeTwo' 
       }, 

       main: function() { 
        console.log("main"); 
       }, 

       routeOne: function() { 
        console.log("routeOne"); 
       }, 

       routeTwo: function() { 
        console.log("routeTwo"); 
       } 
      }); 

      var routes = new Approuter(); 

     </script> 
    </body> 
</html>

EDIT1：路由和pushState的

骨幹路由使您能夠監視hasChange歷史事件（以URL的變化）之間的差異，並引發一些js代碼發現URL（http://localhost/backbone-test/#someRoute）發生了一些變化，這很神奇，因爲我們可以觸發用戶在網站上完成的一些複雜操作，只需調用一個url即可。

pushState的讓你隱藏這個「＃」散，把你的URL更具可讀性，但爲骨幹文檔說

「如果你有/文件/ 100，Web服務器的路由如果瀏覽器直接訪問該URL，則必須能夠才能提供該頁面。「

然後，如果你使用pushState:true您的網址變得更具可讀性，http://localhost/backbone-test/#someRoute到http://localhost/backbone-test/someRoute，但你需要創建一個後端直接回答獲得你所讀的URL。

當pushState爲true並且您調用href="#someRoute"時，瀏覽器將其理解爲html錨點。

來源

2013-09-24 00:47:16

pushstate：false是做什麼的？我的印象是pushstate：true對於路由發生至關重要 – iggy2012

@ iggy2012你的答案在我編輯的答案中。 –

謝謝！這非常有幫助。 – iggy2012

單擊時渲染骨幹視圖（通過路由器推送狀態）

回答

相關問題