美文网首页
Backbone.js浅析(Backbone.Router)

Backbone.js浅析(Backbone.Router)

作者: Locdee_落地 | 来源:发表于2017-09-08 14:52 被阅读0次

    Router是Backbone提供的路由对象,用来将用户请求的网址与后端的处理函数一一对应。
    首先,新定义一个Router类。

    Router = Backbone.Router.extend({
        routes: {
        }
    });
    

    routes属性
    Backbone.Router对象中,最重要的就是routes属性。它用来设置路径的处理方法。
    routes属性是一个对象,它的每个成员就代表一个路径处理规则,键名为路径规则,键值为处理方法。
    如果键名为空字符串,就代表根路径。

    routes: {
            '': 'phonesIndex',
    },
    phonesIndex: function () {
            new PhonesIndexView({ el: 'section#main' });
    }
    

    星号代表任意路径,可以设置路径参数,捕获具体的路径值。

    var AppRouter = Backbone.Router.extend({
        routes: {
            "*actions": "defaultRoute" 
        }
    });
    var app_router = new AppRouter;
    app_router.on('route:defaultRoute', function(actions) {
        console.log(actions);
    })
    

    上面代码中,根路径后面的参数,都会被捕获,传入回调函数。
    路径规则的写法。

    var myrouter = Backbone.Router.extend({
      routes: {
        "help":                 "help",    
        "search/:query":        "search" 
      },
      help: function() {
        ...
      },
      search: function(query) {
        ...
      }
    });
    routes: {
      "help/:page":         "help",
      "download/*path":     "download",
      "folder/:name":       "openFolder",
      "folder/:name-:mode": "openFolder"
    }
    router.on("route:help", function(page) {
      ...
    });
    

    Backbone.history
    设置了router以后,就可以启动应用程序。Backbone.history对象用来监控url的变化。

    App = new Router();
    $(document).ready(function () {
        Backbone.history.start({ pushState: true });
    });
    

    打开pushState方法。如果应用程序不在根目录,就需要指定根目录。

    Backbone.history.start({pushState: true, root: "/public/search/"})
    

    相关文章

      网友评论

          本文标题:Backbone.js浅析(Backbone.Router)

          本文链接:https://www.haomeiwen.com/subject/tqggjxtx.html