问index.hbs何时加载到一个Ember应用程序中？组件和模板之间有什么区别？

EN

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;

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;
  }
});

<input type="text" id="new-todo" placeholder="What needs to be done?" />
{{#todo-list todos=model}}
    {{outlet}}
{{/todo-list}}

<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>

<input type="checkbox" class="toggle" checked="{{if todo.complete 'checked'}}">  
<label class="{{if todo.complete 'completed'}}">{{todo.title}}</label><button class="destroy"></button>

<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>