Ember.js todo 应用程序把手模板问题答案

【问题标题】：Ember.js todo app handlebars template issuesEmber.js todo 应用程序把手模板问题
【发布时间】：2014-02-15 21:45:41
【问题描述】：

我是 Ember 的新手，正在尝试学习 ToDo 应用教程。但是，我很难在 index.html 文件中生成把手脚本。这是索引文件的样子 pre-handlebars 脚本

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Ember.js • TodoMVC</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <section>
    <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>

    <script src="js/libs/jquery-1.10.2.min.js"></script>
    <script src="js/libs/handlebars-1.1.2.js"></script>
    <script src="js/libs/ember-1.4.0.js"></script>
    <script src="js/libs/ember-data.js"></script>
    <script src="js/application.js"></script>
    <script src="js/router.js"></script>
  </body>
</html>

但是，当我将把手脚本标签包装在 body 元素中时，其他 HTML 元素无法正确呈现。该代码未在我的浏览器中运行，我怀疑该脚本在某处缺少关闭元素。我不确定在哪里。有没有人有任何指针。非常感谢并提前感谢您。

 <script type="text/x-handlebars" data-template-name="todos">
    <section>
    <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>
    </script>

【问题讨论】：

标签： javascript jquery ember.js

【解决方案1】：

我不完全确定问题出在哪里，但我会检查您的所有 js 文件是否都已正确加载。我实际上尝试了来自here 的使用 JS Bin 的 ToDo 演示，但我没有看到它正在工作。但是，在获取该代码并将其放入加载源代码的 jsfiddle 中后，它实际上可以工作。

这里是jsfiddle 的链接，这里是live version 的链接。我会检查第二个链接上的输出，看看它和你的代码有什么区别。

希望您的问题得到解决！

【讨论】：

【解决方案2】：

我在完成教程时遇到了同样的问题。诀窍在于脚本包含的顺序。确保首先包含框架依赖项，然后是 application.js，最后是 router.js。见下文：

<!-- ... Ember.js and other javascript dependencies ... -->
<script src="js/libs/jquery-1.10.2.min.js"></script>
<script src="js/libs/handlebars-1.0.0.js"></script>
<script src="js/libs/ember.js"></script>
<script src="js/libs/ember-data.js"></script>
<script src="js/application.js"></script>
<script src="js/router.js"></script>

【讨论】：

【解决方案3】：

你不能在

【讨论】：

那么您还想如何在 index.html 文件中包含 handlebars 脚本标签？我很困惑。
@abdulrhman，您能否为 GabeLafontant 添加更多细节，以便他解决问题？我会添加一个答案，看看我们是否可以解决这个问题......
我没有答案，但对评论者的回答感到非常困惑。在我看到的每个教程中，您都将把手模板放在 index.html 文件中。该脚本标签通常有一些 html 以及车把助手。为什么不能在元素内写html？这是链接emberjs.com/guides/getting-started/adding-a-route-and-template
查看该页面后，似乎不是<script>标签内的html...
@abdulrhman，您绝对可以在脚本标签中编写 html。它不会被浏览器评估为 dom，但它被用作插入模板等的一种方式。