组件简介

Ember 组件 允许我们将标记文本和样式转换为可重用的代码。除了可复用性之外，组件还有助于组织我们的代码结构。这些组件还可以在不同的应用程序之间共享使用。Ember 组件由两个文件组成：一个 Handlebars 模板文件和一个 JavaScript 组件文件。Handlebars 模板是一个 .hbs 文件，用于定义该组件的用户界面；而 JavaScript 组件文件则负责处理该界面中的所有事件。

创建组件

创建组件有两种方式：我们可以手动在 app/components 目录下添加文件，也可以运行以下 Ember CLI 命令：

1ember g component <组件名称>

组件名称必须包含连字符 -，以避免与 HTML 元素名称冲突。上述命令会在 app/components 目录下生成一个 .hbs 文件，同时在 tests/integration/components 目录下生成一个测试文件。

在大多数情况下，我们只需要复用某个 UI 组件。但为了处理其事件，还需要通过以下命令创建对应的 JavaScript 文件：

1ember g component-class <组件名称>

该命令会在 app/components 目录下生成一个 JavaScript 组件文件。

让我们通过运行以下命令来创建一个测试组件，然后将其渲染到模板中：

1ember g component test-comp

该命令会在 app/components 目录下生成一个 test-comp.hbs 文件。打开代码编辑器并添加如下内容：

1<h1>这是我们的测试组件在 {{@route_name}} 模板中渲染的结果</h1>
2{{!-- {{yield}} --}}

• 第 1 行：我们创建了一个 h1 标签来渲染一些 HTML 内容。我们可以从模板中传递任意字符串给 {{@route_name}}。任何位于 {{}} 中的内容都是组件的动态部分，可以在模板中指定任意字符串。
• 第 2 行：我们注释掉了由 Ember CLI 自动生成的 {{yield}} 辅助函数。我们可以在当前组件中从其他组件或模板渲染任意 Handlebars HTML 内容。这在需要在一个组件内部嵌套另一个组件时非常有用。

渲染组件

现在我们在 category.hbs 模板中渲染 test-comp 组件。可以使用组件辅助函数的形式，如 {{component 'test-comp'}}，也可以直接写成 {{test-comp}}。此外，还可以将其作为标签形式渲染，例如 <TestComp>。打开 category.hbs 模板文件，并添加 test-comp 组件：

1{{page-title "Category"}}
2
3<div class="row">
4    {{#test-comp route_name="Category"}}{{/test-comp}}
5    
6    {{#each @model as |item|}}
7
8        <div class="col-lg-3 col-md-4 col-sm-6 col-12">
9           <br>
10           <div class="card">
11                <img class="card-img-top img-fluid" src={{item.imglink}} alt="产品图片">
12                <div class="card-body">
13                    <h6 class="card-title">{{item.product_title}}</h6>
14                    <p class="card-text d-inline-block text-truncate productdesc" >{{item.desc}}</p>
15                    <h5  class="card-text">$ {{item.price}}</h5>
16                </div>    
17            </div>
18        </div> 
19        
20    {{/each}}
21
22</div>

第 4 行：我们渲染了 test-comp 组件。组件的开始标签是 {{#test-comp}}，结束标签是 {{/test-comp}}。我们设置了 route_name = "Category"，这个值将替换组件模板中的 {{@route_name}}。Ember 组件默认不会自动包裹 <div>，而是直接渲染组件模板内容；如果需要容器元素，可以在模板中自行添加。

上述代码的输出效果应如下所示：