这个状态栏的显示，我们可以去设计一下模板。先打开应用的主页 ... index.html ... 在这个页面上，我们再去定义一个模板 ...

用一组 script 标签 ... 上面加上一个 type 属性 ... 属性的值是 text/template ... 表示这里面的内容是一个模板 ... 并不是 JavaScript 代码。所以浏览器不会去解释它。

在这组模板的 script 标签里面，再加上一个 id 属性 ... 去给这个模板起个名字 ... 这里我们叫它 stats-template ..[stæts]

script[type="text/template"]#stats-template

在这个模板里面，先去设计一下显示还剩多少个任务的提示 ... 这个提示信息的周围可以用一组 span 标签 ... 上面加上一个 id ，叫做 todo-count ... 这个 id 的样式已经在应用的样式表里设计好了。

在这个标签里面，输入点文字 ... 还剩 .. 个任务 ... 这中间再用一个 Underscore 模板的特殊标记 ... 特殊标记里的东西是 remaining ... 它的值等会儿会在应用的视图里面给它传递进来。

<%= remaining %>

清除按钮

在它下面，再去添加一下用来清除所有完成任务的按钮 ... 这个按钮的显示可以用一个 if 去判断一下 ... 也就是，如果应用里面有已经完成的任务，才会显示出这个按钮 ...

<% if (completed) { %>
<% } %>

在这个 if 里面， completed 的值，会在应用的视频里给它传递进来 ... 注意在这个判断语句周围用的这个特殊的标记里面，开始的标记这里，没有等号 ... 因为我们并不是想要输出东西 ... 而是去执行代码 ...

在它们中间，再去添加一个按钮 ... 一个 button 标签 ... 上面加上一个叫 clear-completed 的 id ，同样这个 id 的样式已经在应用的样式表里设计好了。

再加上点文字 ... 这里的这个 completed 也会在应用的视图里面给它传递进来。

清除已完成 (<%= completed %>)

这样我们就定义好了状态栏上需要的模板，在后面的视频里， 我们再看一下怎么样在应用的视频里面去使用它。