BackboneJS - 路由器路由

更新于 2025/12/4 19:20:00

描述

它为路由器提供路由，并使用斜杠后跟冒号和参数名称附加路由器的参数。

语法

router.route(route, name, [callback])

参数

route − 它可以是路由字符串或正则表达式。
name − 它是路由器参数的名称。
callback −如果省略回调参数，则为路由器的名称。

示例

<!DOCTYPE html>
<html>
   <head>
      <title>Router Example</title>
      <script src = "https://code.jquery.com/jquery-2.1.3.min.js"
         type = "text/javascript"></script>
      
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.2/underscore-min.js"
         type = "text/javascript"></script>
      
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.1.2/backbone-min.js"
         type = "text/javascript"></script>
   </head>
   
   <script type = "text/javascript">
      //'RouteMenu' 是视图类的名称
      var RouteMenu = Backbone.View.extend ({
         el: '#routemenu',   //'el' 定义使用哪个元素作为视图引用

         //定义在链接上发生的点击事件
         events: {
            'click a' : 'onClick'
         },

         //点击链接后，路由器调用“navigate”来更新 URL
         onClick: function( e ) {
            router.navigate('/');
         }
      });

      //'Router' 是路由器类的名称
      var Router = Backbone.Router.extend ({

         //'routes' 将带有参数的 URL 映射到路由器上的函数
            routes: {
               'route/:id' : 'defaultRoute'
            },
      });

      //'routemenu'是视图类的一个实例
      var routemenu = new RouteMenu();
   
      //它开始监听路线并管理可收藏 URL 的历史记录
      Backbone.history.start();
   </script>
   
   <body>
      <section id = "routemenu">
         <ul>
            <li> <a href = "#/route/1">route 1 </a> </li>
            <li> <a href = "#/route/2">route 2 </a> </li>
            <li> <a href = "#/route/3">route 3 </a> </li>
         </ul>
      </section>
   </body>
   
</html>