2019年5月11日 星期六

HTML5學習筆記 EMBERJS

http://www.emberjs.cn/guides/getting-started/creating-a-static-mockup/

最前面只要加這個
<!doctype html>

接著就是
<html>
  <head>
    <meta charset="utf-8">
    <title>Ember.js • TodoMVC</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>

body裡面的section,section裡面有header、main、footer
<section> 為 HTML 文件的區域元素 (element) , <section> 用來規劃網頁內容的區域,通常裡頭會放 <article> 或其他應用程式的元素。
<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>
更新 index.html 代码,在 </body> 标签之前加入如下几个 <script> 标签,加载这些资源文件。
<!-- ... 为确保简洁,略去头尾代码 ... -->
  <script src="js/libs/jquery-1.11.1.min.js"></script>
  <script src="js/libs/handlebars-v1.3.0.js"></script>
  <script src="js/libs/ember.js"></script>
  <script src="js/libs/ember-data.js"></script>
</body>
<!-- ... 为确保简洁,略去头尾代码 ... -->

接下来,我们将会创建一个Ember.js应用、一个路由('/'),并且将我们的静态页面转换为Handlebars模板。
在 js 目录下,为应用添加一个 js/application.js 文件,为路由添加一个 js/router.js 文件。你可以将这两个文件放在任意你喜欢的地方(甚至把它们所有的代码放在同一个文件内),但是本指南假定你将它们分开了,并且按照前面讲的进行命名。
在 js/application.js 文件中添加如下代码:
1
window.Todos = Ember.Application.create();
这会创建一个 Ember.Application 的实例,并将它作为你本地浏览器JavaScript环境的一个名为 Todos 的变量供使用。
在 js/router.js 文件中添加如下代码:
1
2
3
Todos.Router.map(function() {
  this.resource('todos', { path: '/' });
});
这会告诉Ember.js,当应用的URL与 '/' 匹配时,渲染(render) todos 模板。
接着,更新 index.html 里的代码,将 <body> 里的内容包在一个Handlebars的 <script> 标签中,并在 Ember.js 和其他 javascript 依赖后面引用 js/application.js 和 js/router.js
<body>
  <script type="text/x-handlebars" data-template-name="todos">

    <section id="todoapp">
      {{! ... additional lines truncated for brevity ... }}
    </section>

    <footer id="info">
      <p>Double-click to edit a todo</p>
    </footer>

  </script>

<!-- ... Ember.js 和其他 javascript 依赖库 ... -->
  <script src="js/application.js"></script>
  <script src="js/router.js"></script>
</body>

沒有留言:

張貼留言