Backbone文档03

路由

var Workspace = Backbone.Router.extend({
    routes: {
        'help': 'help',
        'search/:query': 'search'
    },
    help：function () {

    },
    search:function (query,page) {

    }
});

路由类的选项

1. routes属性

• 构成方式是键值对，当跳转某页时，可以监听route.on('route.home')

2. constructor/initialize，使用方式new Backbone.Router([options])
3. route方法，router.route(route,name,callback)添加路由映射
4. naivgate方法，手动跳转路由
5. execute

• 当路由和其响应的callback匹配时被执行

// 手动跳转路由
app.navigate("help/troubleshooting", {trigger: true, replace: true});
// 在传递给你的路由回调之前解析查询字符串
var Router = Backbone.Router.extend({
    execute: function (callback,args) {
        // callback是路由匹配后执行的action
        // args 是路由上的参数
    }
});

路由对象的方法

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

• 动态添加路由
• 第一个可以是路由字符串，可以是正则表达式，第二个是路由名称，第三个是回调函数

2. router.navigate(fragment,[options])

• 该方法可以动态导航
• 第一个参数，是要导航的地址
• 第二个参数，可以这么设置
  • {trigger: true}不仅跳转，还触发相应action
  • {replace: true}该导航代替当前地址

历史

1. Backbone.history.start()
2. 可以在start中设置参数，{pushState: true}，但是要浏览器支持h5,同时服务器做相应的配置
3. 如果不支持，使用{hasChange:false}

视图

视图创建的选项

1. constructor/initialize，使用方式new Backbone.View([options])，这个options有多个特殊的属性，如下：

以下几个选项，定义了视图挂载的元素，再在render方法中，将该元素动态添加到页面上。这几个属性，在extend中也可以使用

1. tagName
2. className
3. id
4. attributes

指定已经存在的挂载元素。这个属性，在extend中也可以使用

1. el

其他

1. model
2. collection
3. events

视图类中的选项

1. template
2. events
3. render

视图对象的属性或者方法

1. view.setElement(element)动态改变挂载元素
2. view.attributes此处的属性指的是，挂载元素上的所有属性
3. view.$(selector)当页面引入jQuery,那么每个视图都有jQuery选择器
4. view.remove()从页面中移动一个视图

实用功能

1. Backbone.onConflict
2. 使用CommonJS加载Backbone,必须动态设置var Backbone.$ = require('jquery');