介绍
Ember.js 是一个基于 MVC 模式的 Web 前端框架，它提供了一些非常有用的功能，其中包括视图和组件。在这篇文章中，我们将深入探讨 Ember.js 中的视图和组件，并提供一些指导意义和示例代码。
视图
在 Ember.js 中，视图是页面上的一个区域，它负责渲染模板并处理用户交互。Ember.js 的视图系统使用 Handlebars.js 模板引擎来生成 HTML 页面，同时提供了一些辅助函数和事件处理器来简化开发。
模板
模板是定义视图结构的核心部分。在 Ember.js 中，我们可以使用 Handlebars.js 来编写模板。下面是一个简单的模板示例：
<ul>
{{#each model as |item|}}
<li>{{item}}</li>
{{/each}}
</ul>在这个模板中，我们使用 #each 辅助函数循环遍历一个数组，并使用 {{item}} 表达式输出每个元素。
控制器
控制器是连接模型和视图的桥梁。它们负责管理模型数据，并将数据传递给视图进行渲染。在 Ember.js 中，我们可以通过扩展 Ember.Controller 类来创建自己的控制器。
import Ember from 'ember';
export default Ember.Controller.extend({
model: ['apple', 'banana', 'orange']
});在上面的代码中，我们创建了一个名为 IndexController 的控制器，并将一个字符串数组赋值给 model 属性。这个属性将被用于渲染视图模板。
路由
路由是掌管页面导航和 URL 映射的机制。在 Ember.js 中，我们可以使用 Ember.Router 类来定义路由，并指定每个路由所对应的控制器和模板。
-- -------------------- ---- -------
------ ----- ---- --------
----- ------ - ---------------------
--------- -------
----------- --------------------
--------------- --------
------------- -------
--
---
------ ------- -------在上面的代码中，我们创建了一个名为 Router 的路由类，并定义了一个名为 index 的路由。这个路由将使用 IndexController 和 index.hbs 模板来渲染页面。
示例
下面是一个完整的示例，展示了如何使用视图、控制器和路由来创建一个简单的任务列表。我们将在 app/templates/index.hbs 文件中创建一个任务列表，并使用 app/controllers/index.js 文件中的控制器来管理任务列表数据。
<ul>
{{#each tasks as |task|}}
<li>{{task}}</li>
{{/each}}
</ul>import Ember from 'ember';
export default Ember.Controller.extend({
tasks: ['Buy milk', 'Walk the dog', 'Do laundry']
});-- -------------------- ---- -------
------ ----- ---- --------
----- ------ - ---------------------
--------- -------
----------- --------------------
--------------- --------
------------- -------
--
---
------ ------- -------组件
组件是可以重复使用的 UI 元素。在 Ember.js 中，我们可以通过继承 Ember.Component 类来创建自己的组件。组件允许我们将视图和行为封装在一个独立的模块中，从而提高代码的可重用性和可维护性。
定义
下面是一个简单的组件示例：
{{! app/components/my-component.hbs }}
<div class="my-component">{{greeting}} {{name}}</div>// app/components/my-component.js import Ember from 'ember'; export default Ember.Component.extend > 来源：[JavaScript中文网](https://www.javascriptcn.com/post/9795) ，转载请注明来源 [https://www.javascriptcn.com/post/9795](https://www.javascriptcn.com/post/9795)