路由
var Workspace = Backbone.Router.extend({
routes: {
'help': 'help',
'search/:query': 'search'
},
help：function () {
},
search:function (query,page) {
}
});
路由类的选项
- routes属性
- 构成方式是键值对，当跳转某页时，可以监听
route.on('route.home')
-
constructor/initialize，使用方式new Backbone.Router([options]) - route方法，
router.route(route,name,callback)添加路由映射 - naivgate方法，手动跳转路由
- execute
- 当路由和其响应的callback匹配时被执行
// 手动跳转路由
app.navigate("help/troubleshooting", {trigger: true, replace: true});
// 在传递给你的路由回调之前解析查询字符串
var Router = Backbone.Router.extend({
execute: function (callback,args) {
// callback是路由匹配后执行的action
// args 是路由上的参数
}
});
路由对象的方法
router.route(route,name,[callback])
- 动态添加路由
- 第一个可以是路由字符串，可以是正则表达式，第二个是路由名称，第三个是回调函数
router.navigate(fragment,[options])
- 该方法可以动态导航
- 第一个参数，是要导航的地址
- 第二个参数，可以这么设置
-
{trigger: true}不仅跳转，还触发相应action -
{replace: true}该导航代替当前地址
-
历史
Backbone.history.start()- 可以在start中设置参数，
{pushState: true}，但是要浏览器支持h5,同时服务器做相应的配置 - 如果不支持，使用
{hasChange:false}
视图
视图创建的选项
-
constructor/initialize，使用方式new Backbone.View([options])，这个options有多个特殊的属性，如下：
以下几个选项，定义了视图挂载的元素，再在render方法中，将该元素动态添加到页面上。这几个属性，在extend中也可以使用
- tagName
- className
- id
- attributes
指定已经存在的挂载元素。这个属性，在extend中也可以使用
- el
其他
- model
- collection
- events
视图类中的选项
- template
- events
- render
视图对象的属性或者方法
-
view.setElement(element)动态改变挂载元素 -
view.attributes此处的属性指的是，挂载元素上的所有属性 -
view.$(selector)当页面引入jQuery,那么每个视图都有jQuery选择器 -
view.remove()从页面中移动一个视图
实用功能
Backbone.onConflict- 使用CommonJS加载Backbone,必须动态设置
var Backbone.$ = require('jquery');
