javascript - 单击时渲染主干 View (通过路由器推送状态)

Question

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

我的 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");
    }
});

View 文件如下:

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>

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

但是当我刷新 localhost/#signup-page 或 localhost/#login-page 页面时，我看到 View 已呈现。

我哪里出错了？

Answer 1

请看一下上面的代码:

<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>

编辑1:路由和pushState之间的差异

主干路由使您能够监控hasChange历史事件(url的变化)并在发现url发生变化时触发一些js代码(http://localhost/backbone-test/#someRoute)，这太棒了，因为我们只需调用一个 url，就可以触发用户在您的网站上执行的一些复杂操作。

pushState 使您能够隐藏此“#”哈希并使您的网址更具可读性，但正如 Backbone 文档所述

"if you have a route of /documents/100, your web server must be able to serve that page, if the browser visits that URL directly."

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

当pushState为true并且您调用href="#someRoute"时，浏览器会将其理解为html anchor 。