下面，我们可以在应用的视图里面，去使用之前定义的状态栏的模板。打开 js ，Views 目录下面的 AppView.js ...
在这里，可以先去定义一个用 Underscore 的模板功能处理好的模板的方法 ... 可以叫做 statsTemplate ... 表示状态栏的模板 ...
然后用 Underscore 的 template 方法 .... 在这个方法里，要把定义的模板交给它 ...
用 jQuery ... 找到 stats-template 这个 id 的元素 ... 再用 html 这个方法，可以得到这个元素里的内容 ... 也就是在上一个视频里，我们定义的状态栏的模板的结构 ...
statsTemplate: _.template($('#stats-template').html()),
在下面， 再去定义一下，视图的 render 方法 ...在这个方法里需要去设置一下在状态栏上显示的内容 ...
render: function() {}
用一个 this.$('#footer') ... 找到当前视图元素里面的带 footer 这个 id 的元素。也就是用来显示应用的状态栏的那个元素 .. 可以先去看一下 ... 打开 index.html ..
在这里 ... 有一个带 footer 这个 id 的元素 ...
再回到应用的视图 ... 然后去设置一下 footer 这个元素里面的内容 ... 用 html 这个方法 ... 要设置的内容，就是用前面定义好的 statsTemplate 这个方法处理的内容 ...
我们需要给这个方法传递两个东西 ... 一个是完成的任务的数量 ... 还有一个是未完成的任务的数量 ...
因为在状态栏的模板里面需要这两样东西 ...
在上面，先去得到这两个属性的值 ... 先定认一个变量来存放完成的任务的数量 ... 它的值，就是完成的任务的数量 ... 集合里的 getCompleted 这个方法，可以得到所有的已经完成的任务项目 ... 调用这个结果的 length 属性，得到的就是完成的任务项目的数量 ...
var completed = app.todoList.getCompleted().length;
另起一行 ... 再定义一个变量 .. 叫做 remaining ... 它的值，是用集合里的 getRemaining 这个方法得到的未完成的任务项目的数量 ...
var remaining = app.todoList.getRemaining().length;
再回到这个 statsTemplate ... 给它一个对象参数 ... 然后设置一个在模板里面的 completed 还有 remaining 这两个东西 ....
completed: completed,
remaining: remaining
它们的值，就是我们在上面得到的完成的还有未完成的任务项目的数量。
监听事件
下面，我们要考虑一下，在什么情况下，去执行这个 render 方法 ... 因为要这个状态上要实时去显示完成的还有未完成的任务项目的数量 ... 所以，当我们切换了任务项目的状态或者删除了任务项目以后，要立即去更新一下状态栏的显示 ...
这样我们就可以去监听一下在任务集合里发生的任何的事件 ... 发生事件以后，就去执行一下应用视图里的 render 方法，更新一下状态栏的显示 ...
在视图的 initialize 这个方法里面 ... 用 listenTo ，去监听一个 all 事件 ... 事件是发生在 app.todoList 上面的 ... 它表示的就是应用的集合 ... 事件的名字是 all ，发生任意的事件都会触发这个 all 事件 ... 处理它的方法就是 this.render ... 使用这个视图里面的 render 方法 ...
this.listenTo(app.todoList, 'all', this.render);
下面，我们到浏览器上去试一下 ...
测试
保存 ... 回到浏览器 ... 刷新 ....
因为在应用视图初始化的时候，调用了集合的 fetch 方法，把模型提取出来，放到集合里面，这样会触发集合的 add 事件，同时也就会发生一个 all 事件 ... 发生这个事件，要做的事儿，就是去执行一下应用视图的 render 方法 ... 在这个方法里面，先会得到完成与未完成的任务的数量 ... 然后再把它们显示到应用的页脚这里 ...
你会看到，现在这里显示，还剩 x 个任务 ... 右边这里 ... 会显示完成的任务项目数 ...
下面，我们可以找到一个任务项目 ... 点一下它旁边的切换状态的对号 ...
你会看到，在状态栏上，会实时的显示出计算出来的结果 ...
