索引.hbs 何时加载到 Ember 应用程序中?组件和模板有什么区别

Question

我正在遵循这个Ember教程，这很快就变得复杂多了。这是我正在遵循的教程。

我对正在发生的事情感到迷茫。index.hbs 何时加载，为什么？这是我从路由器开始的代码.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;

所以看起来我们的主页网址会加载待办事项.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;
  }
});

所以这条待办事项.js路线是我的模型对吗？

我假设余烬默认也会加载 todos.hbs 模板？是吗？或者它是否加载应用程序/模板/待办事项/索引.hbs？它加载哪一个？

这是我的应用程序/模板/todos.hbs代码：

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

这是我的应用程序/模板/待办事项/索引.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-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>

如果应用程序/模板/todos.hbs 被加载...app/templates/todos.hbs中发生了什么？我们是否将模型(以某种方式在模板中可访问？(作为待办事项传递给待办事项列表组件？这是应用程序/模板/组件/待办事项列表.hbs

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

Answer 1

欢迎来到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，每当您有疑问时，请查看指南，直到您理解了该概念，然后转到下一步。