Backbone.js浅析(Backbone.Router)

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