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>
張貼者： 於
標籤： ,

沒有留言:

張貼留言

訂閱： 張貼留言 (Atom)