极客教程Ember.js 解释应用程序的架构结构
Ember.js 是用于构建Web应用程序的JavaScript框架。它使用模型-视图-视图模型（MVVM）架构模式，将应用程序的数据模型、用户界面和逻辑分离成不同的组件。
架构结构： Ember.js应用程序的架构由以下组件组成：
路由和路由处理器： 在Ember.js应用程序中，路由负责将URL映射到特定的路由和模板。路由是应用程序中的特定位置，可以对应于特定的URL或一组URL。
路由处理器是与特定路由相关联的函数。它们负责加载和显示该路由的适当数据和模板。
例如，如果您有一个用于产品详情页面的路由，路由处理器可能负责从服务器加载产品数据并将其显示在该路由的模板中。
路由处理器还可以处理用户输入和应用程序逻辑。例如，如果产品详情页面有一个用于添加评论的表单，路由处理器可能处理表单的提交和评论数据的验证。
除了路由处理器外，Ember.js还有路由模板，这些模板是Handlebars模板，定义特定路由的用户界面的结构和布局。路由处理器负责为路由呈现适当的模板并将其显示给用户。
总的来说，在Ember.js应用程序中，路由和路由处理器负责将URL映射到应用程序的特定位置，并处理这些位置的数据和逻辑。
模型： 在Ember.js应用程序中，模型代表应用程序操作和持久化到服务器或本地存储的数据。模型使用Ember Data库定义，该库提供了一种一致、结构化的方式来处理Ember.js应用程序中的数据。
模型通常被定义为从Ember Data提供的Model类扩展出的类。它们可以具有属性，这些属性表示存储在模型中的数据，并具有关系，定义模型与其他模型的关系。
例如，考虑一个电子商务应用程序中的产品模型。产品模型可以具有诸如名称、价格和描述等属性，以及类别（定义产品所属的类别）和评论（定义为产品编写的评论）之类的关系。
模型还可以具有方法，这些方法是对存储在模型中的数据进行操作的函数。例如，产品模型可以有一个根据为其编写的评论计算平均评分的方法。
在Ember.js中，模型通常用于表示应用程序用户界面中显示和操作的数据。它们提供了一种结构化的方式来管理和操作应用程序中的数据，并且可以使用适配器将数据持久化到服务器或本地存储。
模板： 在Ember.js应用程序中，模板定义了用户界面的结构和布局。它们使用Handlebars模板语言编写，这是一种用于创建动态HTML模板的声明性语法。
模板由HTML元素和Handlebars表达式组成，其中Handlebars表达式是用于动态内容的占位符。Handlebars表达式用大括号括起来，可以引用变量、执行简单逻辑和调用助手函数。
例如，考虑以下的产品详情页面模板：
Javascript
<h1>{{product.name}}</h1>
<p>{{product.description}}</p>
<p>Price: {{product.price}}</p>
<ul>
{{#each product.reviews as |review|}}
<li>{{review.text}} ({{review.rating}} stars)</li>
{{/each}}
</ul>
在这个模板中， h1, p 和 ul 元素是静态HTML元素，而Handlebars表达式被用来显示来自产品模型的动态数据（例如名称、描述和价格），并迭代并显示产品的评论。
在Ember.js中，模板通常与特定的路由相关联，并由该路由的路由处理程序呈现。路由处理程序负责将适当的数据传递给模板，然后显示给用户。
总的来说，Ember.js中的模板是应用程序用户界面的重要组成部分，并提供了一种以声明性和可重用的方式定义界面的结构和布局的方法。
组件： 在Ember.js应用程序中，组件是可重用的UI元素，可用于创建复杂的用户界面。组件被定义为扩展自Ember.js提供的 Component 类的类，并且它们可以具有属性（代表组件的数据）和操作（处理用户输入并触发组件状态更改的函数）。
例如，考虑一个星级评分小部件的组件：
Javascript
import Component from '@ember/component';
export default class StarRatingComponent extends Component {
rating = 0;
maxRating = 5;
@action
setRating(newRating) {
this.set('rating', newRating);
}
}
在这个例子中， rating 和 maxRating 属性分别表示当前评分和最高评分。通过 setRating 操作，用户可以通过在小部件中点击星星来设置评级。
Ember.js中的组件通常用于封装和重用在应用程序中的多个位置使用的UI元素。它们提供了一种以模块化和可重用的方式定义UI元素的方法，并且可以组合使用以创建更复杂的UI元素。
例如，星级评分小部件组件可以用作产品详细页面的一部分，用于显示和允许用户为特定产品设置评级。
总的来说，Ember.js中的组件是应用程序用户界面的重要组成部分，并提供一种以模块化和可重用的方式定义和重用UI元素的方法。