极客教程Ember.js 解释核心概念
Ember.js是一个用于构建单页Web应用程序的JavaScript前端框架。它旨在通过提供强大的功能和工具来处理Web开发中的许多常见任务，从而简化构建复杂的数据驱动Web应用程序的过程。
Ember.js的核心概念之一是将Web应用程序的不同部分之间的关注点分离。Ember.js使用了一种模型-视图-视图模型（MVVM）架构，其中模型代表应用程序中的数据，视图负责渲染用户界面，视图模型充当模型和视图之间的中介。
Ember.js还非常注重约定优于配置，意味着它为应用程序结构提供了一组默认约定，并且开发人员可以根据需要自定义这些约定。这有助于减少需要编写的样板代码的数量，并且使构建一致且易于维护的应用程序更容易。
让我们了解一些Ember.js的核心概念：
1. 模板： Ember.js中的模板用于定义应用程序的用户界面。它们使用Handlebars模板语言编写，这是一种简单、表达力强的语法来定义动态模板。在Ember.js中，模板通常与一个路由或组件关联。当路由或组件呈现时，将使用关联的模板生成显示给用户的HTML。
2. 路由： 在Ember.js中，路由负责定义应用程序中的URL路径，并将其映射到特定的模板和控制器。它们是Ember.js路由系统的重要组成部分，旨在使组织和导航应用程序变得简单。总体而言，Ember.js中的路由是框架路由系统的重要部分，用于定义应用程序中的URL路径，并将其映射到特定的模板和控制器。它们有助于组织和导航应用程序，并允许您通过URL传递数据到路由。
3. 组件： 在Ember.js中，组件是可重用的UI元素，可以在应用程序的不同部分之间轻松共享。它们有自己的模板、数据和行为，并设计为易于组合。总体而言，Ember.js中的组件是一种强大的方式，用于创建可在应用程序的不同部分之间轻松共享的可重用UI元素。它们可以有自己的模板、数据和行为，并且设计为易于组合。
4. 控制器： 在Ember.js中，控制器是负责维护特定路由或应用程序特定部分状态的JavaScript对象。控制器用于管理模板的数据，并可用于提供确定数据如何显示或操作的逻辑。Ember.js中的控制器通常与路由关联，它们负责管理模板用于该路由的数据。当用户导航到一个路由时，将实例化相应的控制器，并调用其设置方法，该方法负责设置模板将使用的数据。控制器还可以嵌套，这使您可以管理更复杂的应用程序状态。例如，如果您有一个特定用户的路由，您可以在主应用程序控制器下嵌套一个该用户的控制器，嵌套的控制器将负责管理该特定用户的数据。
5. 模型： 在Ember.js中，模型是一个JavaScript对象，代表应用程序中特定记录或实体的数据。模型通常用于表示持久存储在数据库中的数据，但它们也可以用于表示内存中的数据或从远程API获取的数据。在Ember.js中，模型是使用Ember.Object类定义的，它们可以像任何其他JavaScript对象一样具有属性和方法。您可以使用Ember.get和Ember.set函数获取和设置模型属性的值，并且可以使用计算属性定义从其他属性派生的属性。
通过一个例子来理解上述概念。如果想了解如何设置ember.js项目，请参考此文章。
示例： 创建一个名为“test1”的Ember.js应用程序路由。该路由应该具有一个包含一系列派对物品的模型，并且一个包含显示列表中第一项和最后一项、显示列表长度、从列表中排除指定项和显示列表中所有项的操作的控制器。该路由还应该具有一个包含输入字段和触发控制器中操作的按钮的模板。使用组件在模板中显示派对物品列表。
步骤1： 在终端或Windows命令中输入以下命令，为此示例生成路由：
ember generate route test1
app/routes/test1.js
Javascript
import Route from "@ember/routing/route";
export default class StudentsRoute extends Route {
partyItems = [
'Digital Camera',
'Jugs, cups & straws',
'Balloons',
'Scissors',
'Cold Drink',
'Table Confetti',
'Party Hats',
'Wine',
'Napkins',
'Party Plates',
'Speakers',
'Music System',
'Cups',
];
len;
model() {
return this.partyItems;
}
setupController(controller, model) {
super.setupController(controller, model);
controller.set("partyItems", this.partyItems);
controller.set("len", this.len);
controller.set("item", this.item);
}
}
app/controllers/test1.js
Javascript
import Ember from "ember";
export default Ember.Controller.extend({
actions: {
show_first() {
let ans = this.partyItems.get('firstObject');
alert(ans)
},
show_last() {
let ans = this.partyItems.get('lastObject');
alert(ans)
},
show_len() {
let S_len = this.partyItems.length;
this.set('len', S_len)
alert('Length of List is ' + this.len);
},
check_items(data) {
let temp = this.partyItems.without(data)
alert(temp.join('\n'))
},
show() {
let temp = this.partyItems.get('[]');
alert(temp.join('\n'))
},
},
});
app/templates/test1.hbs
Javascript
{{page-title "[ ]"}}
<h3>List of Items: </h3>
<table>
<ul>
{{#each @model as |student|}}
<li>{{student}}</li>
{{/each}}
</ul>
</table>
<br /><br />
<div>
<label>Enter Item: </label>
{{input value=this.temp}}
</div>
<input
type="button"
id="check-atIndex"
value="Print Except this Item"
{{action "check_items" this.temp}}
/>
<br /><br />
<input
type="button"
id="show-item"
value="Pop up All Items"
{{action "show"}}
/>
<br /><br />
<input
type="button"
id="first-item"
value="Show First Item"
{{action "show_first"}}
/>
<br /><br />
<input
type="button"
id="show-item2"
value="Show Last Item"
{{action "show_last"}}
/>
<br /><br />
<input
type="button"
id="print-list"
value="Print length of List"
{{action "show_len"}}
/>
{{outlet}}
输出: 访问localhost:4200/test1查看输出。
