使用手柄最后显示什么 [英] Using handlebars end-up displaying nothing
问题描述
首先，我是一个新用户，所以如果这不是提出这个问题的地方，或者问题泄露了细节，请通知我，我将进行必要的调整。
我刚刚接触到Ember.JS，最近我开始学习这个入门指南。
在本指南的早期阶段，我已经在处理下一个问题：
所有阶段都运行良好，直到我需要更新我的index.html来包装此Handlebars脚本标记中< body> 的内容的阶段：
< script type =text / x-handlebarsdata-template-name =todos> ... ..< /脚本>
如本指南第5步所要求。
在我这样做之后我的窗口最后没有显示（背景图像除外）
这是我的文件的外观喜欢（分层）：
https ：//dl.dropboxusercontent.com/u/24149874/image.png
这些是相关文件的内容，指导：
index.html
<！doctype html>
< html>
< head>
< meta charset =utf-8>
< title> Ember.js•TodoMVC< / title>
< link rel =stylesheethref =style.css>
< / head>
< body>
< script type =text / x-handlebarsdata-template-name =todos>
< section id =todoapp>
< header id =header>
< h1> todos< / h1>
< input type =textid =new-todoplaceholder =需要做什么？ />
< / header>
< section id =main>
< ul id =todo-list>
< li class =completed>
< input type =checkboxclass =toggle>
< label>学习Ember.js< / label>< button class =destroy>< / button>
< / li>
< li>
< input type =checkboxclass =toggle>
< label> ...< / label>< button class =destroy>< / button>
< / li>
< li>
< input type =checkboxclass =toggle>
< label> Profit！< / label>< button class =destroy>< / button>
< / li>
< / ul>
< input type =checkboxid =toggle-all>
< / section>
< footer id =footer>
< span id =todo-count>
< strong> 2< / strong> todos left
< / span>
< ul id =filters>
< li>
< a href =allclass =selected> All< / a>
< / li>
< li>
< a href =active> Active< / a>
< / li>
< li>
< a href =已完成>已完成< / a>
< / li>
< / ul>
< button id =clear-completed>
清除完成（1）
< / button>
< / footer>
< / section>
< footer id =info>
< p>双击以编辑todo< / p>
< / footer>
< / script>
< script src =libs / jquery-1.10.js>< / script>
< script src =libs / handlebars.js>< / script>
< script src =libs / ember.js>< / script>
< script src =libs / ember-data-0.13.js>< / script>
< script src =application.js>< / script>
< script src =router.js>< / script>
< / body>
< / html>
application.js
window.Todos = Ember.Application.create（）;
router.js
$ pre> $ code Todos.Router.map（function（）{
this.resource（'todos'，{path：'/'}）;
}） ;
当然，我尝试在其他相关的帖子中找到答案，但没有发现有帮助。 / p>
欣赏你的帮助！
是应用程序模板本身。
尝试定义如下：
< script type =text / x-handlebarsdata-template-name =application>
{{outlet}}
< / script>
< script type =text / x-handlebarsdata-template-name =todos>
...
< / script>
{{outlet}} 重要的是，因为你需要告诉ember在哪里注入你的 todos 模板。
请参阅这里为一个工作示例，不包括css文件，所以一切都是正常的，但基本的设置正在运行。
希望有帮助。
First, I'm a new user so if this is not the place to ask this question or the question is leaking with details please inform me and I'll do the required adjustments.
I'm new to Ember.JS and I've recently started learning by reading this getting started guide.
In the early stages of this guide I'm already dealing with the next problem:
All stages worked well until the stage where I need to update my index.html to wrap the inner contents of <body> in this Handlebars script tag:
<script type="text/x-handlebars" data-template-name="todos">.....</script>
as asked in the 5th step of this guide.
After I do so my window ends-up displaying nothing (except for the background image)
Here is how my files looks like (hierarchic):
https://dl.dropboxusercontent.com/u/24149874/image.png
And those are the content of the relevant files from the previous steps in the guide:
index.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Ember.js • TodoMVC</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<script type="text/x-handlebars" data-template-name="todos">
<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>
<script src="libs/jquery-1.10.js"></script>
<script src="libs/handlebars.js"></script>
<script src="libs/ember.js"></script>
<script src="libs/ember-data-0.13.js"></script>
<script src="application.js"></script>
<script src="router.js"></script>
</body>
</html>
application.js
window.Todos = Ember.Application.create();
router.js
Todos.Router.map(function () {
this.resource('todos', { path: '/' });
});
Of course, I tried to find an answer in other relevant posts but nothing I found was helpful.
Appreciate your help!
I guess the only piece missing here is the application template itself.
Try to define one like this:
<script type="text/x-handlebars" data-template-name="application">
{{outlet}}
</script>
<script type="text/x-handlebars" data-template-name="todos">
...
</script>
The {{outlet}} here is important since you need to tell ember where to inject your todos template.
See here for a working example, the css file is not included so it's normal that everything is screwed up, but the basic setup is working.
Hope it helps.
这篇关于使用手柄最后显示什么的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
![https ：//dl.dropboxusercontent.com/u/24149874/image.png](\"https://dl.dropboxusercontent.com/u/24149874/image.png\"){kind=link}
