发布于 2015-08-18 16:29:52 | 1170 次阅读 | 评论: 0 | 来源: 网络整理
在开始编码之前，我们可以粗略地作出我们应用的布局。打开任意你喜欢的文本编辑器，新建一个文件，并命名为 index.html 。这个文件将会包含我们整个应用的HTML模板并请求图片、样式表和Javascript资源。
开始了，将下列文字加到 index.html 里：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Ember.js • TodoMVC</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<section id="todoapp">
<header id="header">
<h1>todos</h1>
<input type="text" id="new-todo" placeholder="What needs to be done?" />
</header>
<section id="main">
<ul id="todo-list">
<li class="completed">
<input type="checkbox" class="toggle">
<label>Learn Ember.js</label><button class="destroy"></button>
</li>
<li>
<input type="checkbox" class="toggle">
<label>...</label><button class="destroy"></button>
</li>
<li>
<input type="checkbox" class="toggle">
<label>Profit!</label><button class="destroy"></button>
</li>
</ul>
<input type="checkbox" id="toggle-all">
</section>
<footer id="footer">
<span id="todo-count">
<strong>2</strong> todos left
</span>
<ul id="filters">
<li>
<a href="all" class="selected">All</a>
</li>
<li>
<a href="active">Active</a>
</li>
<li>
<a href="completed">Completed</a>
</li>
</ul>
<button id="clear-completed">
Clear completed (1)
</button>
</footer>
</section>
<footer id="info">
<p>Double-click to edit a todo</p>
</footer>
</body>
</html>
|
和这个页面相关的样式和背景图片要放在与 index.html 相同的目录下。
在浏览器中打开 index.html 以确保所有的 assets 正确加载。这时你应该能够看见TodoMVC应用已经有三条我们采用硬编码（hard-coded）方式写上去的 <li> ，每个 <li> 显示的就是这条todo的要显示的内容了。
