index.hbs何时加载到一个Ember应用程序中？组件和模板之间有什么区别？
我遵循这个Ember教程，这很快变得更加复杂。这就是我所关注的教程。
我不知道发生了什么事。什么时候加载index.hbs ?为什么？下面是以router.js开头的代码：
import Ember from 'ember';
import config from './config/environment';
var Router = Ember.Router.extend({
location: config.locationType
});
Router.map(function() {
this.route('todos', { path: '/'}, function() {
this.route('complete');
this.route('incomplete');
});
});
export default Router;所以看起来我们的主页url会加载todos.js路径，对吗？这是我的密码：
import Ember from 'ember';
export default Ember.Route.extend({
model() {
let todos = [
{
title: 'Learn Ember',
complete: false,
},
{
title: 'Solve World Hunger',
complete: false,
}
];
return todos;
}
});所以这条todos.js路线是我的模型对吗？
默认情况下，我假设成员也会加载todos.hbs模板？是那么回事吗？还是加载应用程序/模板/todos/index.hb？它装哪一个？
这是我的应用程序/模板/todos.hbs代码：
<input type="text" id="new-todo" placeholder="What needs to be done?" />
{{#todo-list todos=model}}
{{outlet}}
{{/todo-list}}这是我的应用程序/模板/todos/index.hbs代码：
<ul id="todo-list">
{{#each model as |todo|}}
<!-- this loads the component todo-item and passes in a todo as todo -->
{{todo-item todo=todo}}
{{/each}}
</ul>本教程并没有真正解释这里发生了什么。如果加载了index.hbs，那么它会加载todo项组件模板吗？如果是这样，这是我的应用程序/模板/组件/todo-item.hbs：
<input type="checkbox" class="toggle" checked="{{if todo.complete 'checked'}}">
<label class="{{if todo.complete 'completed'}}">{{todo.title}}</label><button class="destroy"></button>如果app/templates/todos.hbs获得loaded...What，则在app/templates/todos.hbs中运行吗？我们是否传递模型(在模板中是可以访问的？)作为待办事项到待办事项列表组件？以下是应用程序/模板/组件/todo-list.hb
<section id="main">
{{yield}}
<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>回答 1
Stack Overflow用户
发布于 2015-11-03 09:17:59
欢迎来到美丽的Emberjs世界！首先，我建议您访问Emberjs的官方页面。你能看到侧栏菜单吗？好吧，如果你想了解Emberjs的工作原理，就准备花点时间阅读它。首先，我强烈建议您至少阅读Router, Template, Component and Controller部分。
让我们看看您提供的一些片段：
Router.map(function() {
this.route('todos', { path: '/'}, function() {
this.route('complete');
this.route('incomplete');
});
});这就是你定义路线的地方。这里您拥有的是名为“todos”的主要路由，但它用作根页面(从/开始)。在此之后，还有两条路线：/complete和/incomplete。
model() {
let todos = [
{
title: 'Learn Ember',
complete: false,
},
{
title: 'Solve World Hunger',
complete: false,
}
];
return todos;
}这里您是在一个路由中定义一个模型(我假设是todos的路由)。挺直的，不是吗？例如，如果您使用的是Ember Data。您将在这里向服务器请求模型，并且路由将等待直到收到响应。
有一个index模板和一个todos模板的原因很简单：todos.hbs将包含将呈现每个页面的{{outlet}}。把它想象成一个包装。无论在/之后发生什么，都会被这个todos.hbs包装，甚至是index.hbs。您有更多的信息这里，在指南中(为什么我建议您首先阅读它)。
让我们转到另一个片段：
{{#todo-list todos=model}}
{{outlet}}
{{/todo-list}}在这里，您使用component包装在{{outlet}}中呈现的任何内容。您还没有在这里粘贴它，但是它应该在其模板中至少包含一个{{yield}}，以指定{{outlet}}将呈现在何处。关于{{yield}}的信息可以找到这里。
让我们转到下一部分：
ul id="todo-list">
{{#each model as |todo|}}
<!-- this loads the component todo-item and passes in a todo as todo -->
{{todo-item todo=todo}}
{{/each}}
</ul>这个{{#each}}把手以块的方式表示(这就是为什么它在开始使用#，在末尾使用/ )，它是一个循环，允许您处理模型的每一项，定义为todo。您在这里要做的是为组件todo-item提供模型的一个项。如果您的模型有3个todos，那么todo-item将被呈现3次，每个呈现一次。
再次，我建议您按照本教程打开emberjs guides，当您有疑问时，检查指南，直到您理解概念，然后，进入下一个步骤。
https://stackoverflow.com/questions/33481337
复制相似问题
腾讯云开发者
