文章来源于网络收集而来，版权归原创者所有，如有侵权请及时联系！

入门指南 - 创建静态页面

发布于 2020-02-21 15:48:01 字数 3829 浏览 1048 评论 0 收藏 0

英文原文：http://emberjs.com/guides/getting-started/creating-a-static-mockup

在开始编码之前，我们可以粗略地作出我们应用的布局。打开任意你喜欢的文本编辑器，新建一个文件，并命名为 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的要显示的内容了。