下面，我们去给应用创建一个路由器 ... 用它可以处理用户访问的地址 .. 在 js 这个目录的下面 ... 找到 Routers 目录 ... 打开 Router.js ...

在这个文件里去定义一个路由器 .. 先去添加一个 app 对象 ... 作为一个命名空间 ..

var app = app || {};

然后把要定义的路由器作为这个对象的一个属性 ... 可以叫做 TodoRouter ... 在 Backbone 里定义路由器，可以让它等于 Backbone 的 Router 的 extend 这个方法 ...

app.TodoRouter = Backbone.Router.extend({});

在这个路由器里，添加一个 routes 属性，去添加应用的路由 .. 这个路由的地址可以是 *filter ，表示这是一个splat 类型的地址 .. 这个形式的地址可以匹配任意的参数 .. . filter 就是我们为在地址上的参数起的一个名字...

再去给这个路由指定一个处理它的方法 ... 这个方法可以叫做 setFilter ...

在下面，再去定义一下这个方法 ...

setFilter: function(filter) {}

地址上的参数可以作为这个方法的一个参数传递进来 ... 我们可以用 filter 来表示 . ..

先在方法里面，去判断一下 filter 这个参数 ... 如果在地址上有参数的话 ... 可以让 filter 等于清理之后的这个参数的值 ... 可以用 trim() 这个方法清理掉多余的空格 ...

if (filter) {
filter = filter.trim();
}

因为在应用的其它地方，我们需要用到这个地址上的参数的值，所以，可以在 app 这个对象里面，再去添加一个属性 ... 可以叫做 TodoFilter .. 让它的值等于 filter .. 或者是一个空白的字符 ...

app.TodoFilter = filter || '';

为了可以让应用的其它的部分知道应用的地址发生了变化 ... 在这个路由的方法里面，可以在应用的集合上去触发一个自定义的事件 ... 然后在应用的视图里面，我们可以去监听这个事件 ... 触发自定义的事件，可以用 trigger 这个方法 ...

app.todoList.trigger('filter')

触发的这个自定义的事件的名字叫 filter ...

下面，我们再测试一下设置的这个路由是否起作用 ..

在这个方法里，用一个 console.log ，在控制台上输出点东西 ... 可以去输出地址上的参数 ... 这个参数的值，我们已经交给了 app 对象的 TodoFilter 这个属性了 .. 所以，可以把它输出到控制台上 ..

console.log(app.TodoFilter);

然后在下面，再去创建一个这个路由器的实例..

app.todoRouter = new app.TodoRouter;

最后再去执行一下 Backbone 的 history 的 start 方法..

Backbone.history.start();

保存 ... 再到浏览器上去试试 ...

刷新 .. 打开控制台 ...

然后点击导航栏上面的链接 ... 你会看到在控制台上，会输出在地址上面的参数 ... 点击 进行中 ... 会输出 active ....

再点一下 已完成 ... 会输出 completed ..