HTML《 Backbone 应用实例》

下面，我们再去准备一下应用程序需要用到的 HTML 的代码。

在文档的 body 标签的里面 ... 先添加一组 div 标签，上面再加上一个叫 todoapp 的 id ..

header

然后在组标签里面，再添加一组 header 标签 ... 这个标签的上面添加一个 header id ... 这里面的东西是应用的头部 ...

加上一组 h1 标题标签 ... 里面的内容是 todos ...

<h1>todos</h1>

然后，再加上一个 text 类型的 input 元素，也就是一个文本框 ... 在这个文本框里，输入内容，然后按一下回车 ... 会在应用里面添加一条新的任务 ...

在这个标签上，加上一个 new-todo 的 id ... 再添加一个点位符的属性 ... placeholder ... 它的值是需要做点什么呢？

最后再添加一个 autofocus ，让这个文本框自动处在焦点状态 ....

main

下面再添加应用的主体部分 ... 用一组 section 标签 ... 上面加上一个叫做 main 的 id ...

先在这里添加一个复选框 ... 它的作用就是，可以切换所有的任务的状态 ... 勾选它的话会把所有的任务都设置成完成的状态 .. 取消勾选，会把所有的任务都设置成进行中的状态 ..

在这个元素上面，再加上一个 id ，可以叫做 toggle-all ... 元素的名字也可以叫做 toggle-all

我们可以再给这个元素添加一个标签 ...

<label for="toggle-all">标记全部为完成</label>

然后在主体部分里面，主要的内容是任务的列表 ... 这里我们添加一组 ul 标签 ... 上面加上一个叫 todo-list 的 id ..

在后面，我们会通过代码，把渲染之后的任务模型的列表都到这个无序列表元素里面。

footer

在应用主体结构的下面，再添加一个页脚 .... 可以使用 footer 标签 ... 上面同样需要一个 id ... 可以做它 footer

在后面我们会把一些状态信息放到这里面 .. 比如还剩下多少个任务 ... 已经完成的任务有多少，另外还有一个简单的导航，可以切换显示全部的任务，完成的任务，还有进行中的任务 ...

info

最后在这个 todoapp 标签的外面 .. . 再添加一组显示提示信息的标签 ... 上面加上一个叫 info 的 id ...

<div id="info">
<p>双击可以编辑任务</p>
</div>

HTML