鍍金池/ 教程/ HTML/ BackboneJS router.execute()方法
BackboneJS Collection.extend()方法
BackboneJS collection.pop()方法
BackboneJS collection.set()方法
BackboneJS collection.remove()方法
BackboneJS view.attributes
Backbone.View.extend()方法
BackboneJS router.route()方法
BackboneJS model.destroy()方法
BackboneJS視圖初始化
BackboneJS事件stopListening
BackboneJS collection.clone()方法
BackboneJS router.navigate()方法
BackboneJS model.idAttribute屬性
BackboneJS router.execute()方法
BackboneJS模型
BackboneJS model.previousAttributes()方法
BackboneJS model.escape()方法
BackboneJS model.previous()方法
BackboneJS應用
BackboneJS view.setElement()方法
BackboneJS collection.findWhere()方法
BackboneJS collection.slice()方法
BackboneJS view.el
BackboneJS集合
BackboneJS model.unset()方法
BackboneJS collection.comparator屬性
BackboneJS collection.push()方法
BackboneJS model.save()方法
BackboneJS collection.shift()方法
BackboneJS collection.parse()方法
BackboneJS Collection.model
BackboneJS教程
BackboneJS model.defaults
BackboneJS事件trigger
BackboneJS collection.sync()方法
BackboneJS model.has()方法
BackboneJS model.isNew()方法
BackboneJS model.url()方法
BackboneJS Model.get()方法
BackboneJS視圖
BackboneJS model.clone()方法
BackboneJS collection.toJSON()方法
BackboneJS Backbone.emulateHTTP
BackboneJS Router初始化
BackboneJS環(huán)境設置
BackboneJS model.fetch()方法
BackboneJS事件
BackboneJS Model.set()方法
BackboneJS router.routes
BackboneJS collection.unshift()方法
BackboneJS collection.add()方法
BackboneJS collection.models
BackboneJS model.hasChanged()方法
BackboneJS collection.url()方法
BackboneJS Backbone.history.start()方法
BackboneJS model.validate()方法
BackboneJS collection.create()方法
BackboneJS model.parse()方法
BackboneJS事件on
BackboneJS collection.at()方法
BackboneJS事件off
BackboneJS view.$(selector)方法
BackboneJS .sync()方法
BackboneJS collection.sort()函數(shù)
BackboneJS collection.length
BackboneJS model.changedAttributes()方法
BackboneJS model.isValid()方法
BackboneJS model.attributes屬性
BackboneJS collection.reset()方法
BackboneJS model.validationError
BackboneJS model.clear()方法
BackboneJS collection.get(id)方法
BackboneJS model.changed
BackboneJS同步
BackboneJS 集合初始化
BackboneJS collection.fetch()方法
BackboneJS model.sync()方法
BackboneJS Model.extend()方法
BackboneJS model.id屬性
BackboneJS model.urlRoot()方法
BackboneJS路由
BackboneJS事件once
BackboneJS collection.pluck()方法
BackboneJS view.template(data)方法
BackboneJS事件listenTo
BackboneJS collection.where()方法
BackboneJS model.toJSON()方法
BackboneJS Backbone.emulateJSON
BackboneJS Model.initialize()方法
BackboneJS view.$el
BackboneJS事件listenToOnce
BackboneJS model.cid屬性

BackboneJS router.execute()方法

用來當路由響應相匹配的回調(diào)。

語法

router.execute(callback, args)

參數(shù):

  • callback: 執(zhí)行時有一個與路由匹配。
  • args: execute方法中通過的參數(shù)。

示例

<!DOCTYPE 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' is a name of the view class
         var Route1 = Backbone.View.extend({

            //Creates the route1 link for the text to be change after triggerring the click event
            template: '<b>This is route 1</b>',

               //The 'initialize' function creates new constructor for the router instantiation
               initialize: function () {
                  this.execute();
               },

               //This is called when a route matches its corresponding callback
               execute: function () {
                  this.$el.html(this.template);
               }
         });
         var Route2 = Backbone.View.extend({
            template: '<b>This is route 2</b>',
               initialize: function () {
                  this.execute();
               },
               execute: function () {
                  this.$el.html(this.template);
               }
        });

        //'AppRouter' is a name of the router class
        var AppRouter = Backbone.Router.extend({
           routes: {
              '': 'homeRoute',
              'route/1': 'homeRoute',
              'route/2': 'aboutRoute',
           },

           //When you click on route1, it will navigate to the custom view class 'Route1'
           homeRoute: function () {
              var route1 = new Route1();
              $("#content").html(route1.el);
           },

           //When you click on route2, it will navigate to the custom view class 'Route2'
           aboutRoute: function () {
              var route2 = new Route2();
              $("#content").html(route2.el);
           }
       });
       var appRouter = new AppRouter();   //It is an instantiation of the router

       //It start listening to the routes and manages the history for bookmarkable URL's
       Backbone.history.start();
     </script>
  <body>
    <div id="navigation">
       <a href="#/route/1">route1</a>
       <a href="#/route/2">route2</a>
    </div>
    <div id="content></div>
  </body>
</html>

輸出

讓我們進行以下步驟來看看上面的代碼工作：

  • 保存上述代碼的文件execute.html

  • 在瀏覽器打開這個HTML文件。