Ember.js Todo应用程序把手模板问题
[英]Ember.js todo app handlebars template issues
问题描述
I'm very new to Ember and am trying to follow the ToDo app tutorial. 
我是Ember的新手，正在尝试阅读ToDo应用程序教程。 However, I am having a hard time generating a handlebar script in my index.html file. 但是，我很难在index.html文件中生成一个车把脚本。 Here is what the index file looks pre-handlebars script 索引文件的外观如下所示：
<!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>
However, when I wrap the handlebars script tag within the body element, the other HTML elements are not rendered properly. 但是，当我将handlebars脚本标签包装在body元素中时，其他HTML元素无法正确呈现。 The code doesn't run in my browser and I suspect the script is missing a closing element somewhere. 该代码未在我的浏览器中运行，我怀疑脚本在某处缺少结束符。 I'm not sure where. 我不确定在哪里。 Does anyone have any pointers. 没有人有任何指针。 Much appreciated and thank you in advance. 非常感谢，并在此先感谢您。
<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>
3 个解决方案
解决方案1
0 2014-02-15 22:39:16
I'm not completely sure what the issue is, but I would check that all of your js files are being properly loaded. 我不确定是什么问题，但是我会检查所有js文件是否已正确加载。 I actually tried the ToDo demo from here that used JS Bin and I didn't see that it was working. 我实际上从这里尝试了使用JS Bin的ToDo演示，但我没有看到它在起作用。 However, after taking that code and placing into a jsfiddle where the sources are loaded in the <head> tag, it actually worked. 但是，在获取该代码并将其放入jsfiddle中并将源代码装入<head>标记后，它实际上可以工作。
Here's a link to the jsfiddle and here a link to the live version . 这是jsfiddle的链接，这是实时版本的链接。 I would inspect the output on the second link and see what the differences are between that and your code. 我将检查第二个链接上的输出，看看它和您的代码之间有什么区别。
Hope you get your question resolved! 希望您能解决您的问题！
解决方案2
0 2014-07-12 21:06:06
I faced the same issue while working through the Tutorial. 在学习本教程时，我遇到了同样的问题。 The trick is in the order of the script includes. 技巧是按脚本包含的顺序进行的。 Make sure that the framework dependencies are included first and then the application.js and finally the router.js. 确保首先包括框架依赖性，然后包括application.js，最后包括router.js。 See below: 见下文：
<!-- ... 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
-2 2014-02-15 21:54:04
您不能在<script>元素上写html！
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.