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

视图文件如下：

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>

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

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

我哪里错了？

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>

Edit1：Routes和pushState之间的差异

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

pushState 可让您隐藏此“＃”哈希并使您的网址更具可读性，但正如骨干文档所述

“如果你有/ documents / 100的路由，你的网络服务器必须能够如果浏览器直接访问该网址，则提供该页面。“

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

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

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

1 个答案: