There are many JavaScript libraries available, and most of them are very good at providing the traditional DOM-centric interactions required by typical websites. But when it comes to building a manageable code base for a single-page application, a whole new set of frameworks are needed to solve the problem.
As the old saying goes: “Use the best tool for the job.”
It's not that a traditional library like jQuery can't help you build desktop-like experiences, it's just not its use case and lacks features like data binding, event routing, and state management. Sure, you could probably cobble together a bunch of plugins to implement some of these features, but in my opinion it makes more sense to start with a framework built specifically from the ground up to solve these specific problems. As the old saying goes: “Use the best tool for the job.”
I recently had an interview with the Ember.js team; my motivation was to learn about what I call "the new hot thing": Ember.js.
Ember meets the requirements I described above, and in a way that is reminiscent of how jQuery gets developers up and running quickly. The team deliberately took steps to abstract away many of the complexities inherent in designing and building model/view/controller based applications, leveraging years of expertise and knowledge gained from building large applications.
What I want to do is help you get up to speed with Ember.js through a multi-part article series that will introduce you to the concepts of the framework step by step. We'll start with the usual introduction (which happens to be this article) and then gradually build a complete application. Best of all, this will also help me reinforce the concepts I've learned and maybe learn some new techniques! I'll do my best to have the Ember.js team review this material for accuracy and maybe even contribute something valuable to it.
Before we continue, please note: Ember.js brings a lot of magic to you. Sometimes you'll look at the code and say "Huh? How does it do that?" I've been there and I'll try to distill some things, but I won't delve into the internals of the Ember framework code. Instead, I'll discuss how to leverage its tools and APIs to build your applications.
So let’s get started.
Ember.js is not a framework for building traditional websites.
The first thing to remember is that Ember.js is not a framework for building traditional websites. Libraries like jQuery and MooTools are great for this. If you're considering Ember.js, our assumption is that you're looking to build desktop-like experiences - especially ones that are scalable. In fact, the framework’s tagline is “A framework for developing ambitious web applications,” which tells you that it’s clearly not your dad’s JavaScript library.
I mentioned before that Ember utilizes the MVC pattern to promote proper code management and organization. If you've never done MVC-based development, you should definitely read it. Nettuts has a great article on this topic. For those of you familiar with these concepts, you should feel right at home. One thing I keep hearing is that migrating from Backbone to Ember.js is actually easy because Ember does a lot of the heavy lifting for you while still maintaining those code organization patterns that developers are used to. p>
Ember also relies on client-side templates...a lot. It uses the Handlebars template library, which provides expressions that allow you to create dynamic HTML-based templates. Ember developers can bind data to these embeddable expressions and dynamically change the display of their applications. For example, I could create a template that takes a set of people and displays them in an unordered list:
<ul>
{{#each people}}
<li>Hello, {{name}}!</li>
{{/each}}
</ul>
Note that the "#each" expression is used as a loop instruction, enumerating each element of the "people" array and replacing the "{{name}}" expression with the actual value. Note that double brackets are the markers used by Handlebars to identify expressions. This is a small example, we'll get into more details later.
Handlebars is a very powerful client-side templating engine, and I recommend checking out not only the Ember guide, but also the Handlebars website itself to get a full grasp of the options available. You'll be using it a lot.
Ember.js depends on other libraries, so you'll need to get a copy of jQuery and Handlebars. But wait, didn’t I say that jQuery and Ember function in different spaces? Well, yes, I did, but here's the thing: The Ember team is committed to not reinventing the wheel. They chose jQuery to do what it does best: work with the DOM. This is a good thing because jQuery is really good at this. That’s why they chose Handlebars, a fantastic templating library that happens to be written by Ember core team member Yehuda Katz.
The easiest way to get the files you need is to visit the Ember.js Github repository and download the starter kit. Here's a sample to get you started. At the time of writing, it contains:
还有一个基本的 html 模板，其编码包含所有关联的库（jQuery、Ember 等），以及 Handlebars 模板和“app.js”的示例，其中包含用于启动基本的 Ember 应用程序。
<script src="js/libs/jquery-1.9.1.js"></script> <script src="js/libs/handlebars-1.0.0-rc.3.js"></script> <script src="js/libs/ember-1.0.0-rc.1.js"></script> <script src="js/app.js"></script>
请注意，app.js 不是框架的一部分。这是一个普通的 ole JavaScript 文件；您可以将其命名为任何您想要的名称。而且，虽然我们将在本教程系列中使用它，但以后您可能最终会将 JavaScript 拆分为多个文件，就像处理任何其他网站或应用程序一样。此外，Ember 并不期望您的框架文件有特定的目录结构。
当您查看入门工具包代码时，它可能看起来像典型的网站代码。从某些方面来说，你是对的！不过，一旦我们开始组织事情，您就会看到构建 Ember 应用程序有何不同。
在开始编写代码之前，了解 Ember.js 的工作原理以及了解构成 Ember 应用程序的移动部件非常重要。让我们看一下这些部分以及它们之间的关系。
模板是定义用户界面的关键部分。正如我之前提到的，Handlebars 是 Ember 中使用的客户端库，在为应用程序创建 UI 时广泛使用该库提供的表达式。这是一个简单的例子：
<script type="text/x-handlebars">
<h2><strong>{{firstName}} {{lastName}}</strong></h2>
</script>
请注意，表达式会混合到 HTML 标记中，并通过 Ember 动态更改页面上显示的内容。在这种情况下，{{firstName}} 和 {{lastName}} 占位符将被从应用检索的数据替换。
Handlebars 通过灵活的 API 提供强大的功能。了解它提供的功能对您来说非常重要。
应用程序的路由器有助于管理应用程序的状态。
应用程序的路由器有助于管理应用程序的状态以及用户导航应用程序时所需的资源。这可能包括从模型请求数据、将控制器连接到视图或显示模板等任务。
您可以通过为应用程序中的特定位置创建一条路线来实现此目的。路由指定应用程序的各个部分以及与其关联的 URL。 URL 是 Ember 用于了解需要向用户呈现哪种应用程序状态的关键标识符。
App.Router.map( function() {
this.route( 'about' ); // Takes us to "/about"
});
路由的行为（例如：从模型请求数据）通过 Ember 路由对象的实例进行管理，并在用户导航到特定 URL 时触发。一个示例是从模型请求数据，如下所示：
App.EmployeesRoute = Ember.Route.extend({
model: function() {
return App.Employee.find();
}
});
在本例中，当用户导航到应用程序的“/employees”部分时，路由会向模型请求所有员工的列表。
数据的对象表示。
模型是应用程序将使用的数据的对象表示。它可以是一个简单的数组或通过 Ajax 请求从 RESTful JSON API 动态检索的数据。 Ember 数据库提供了用于在应用程序中加载、映射和更新数据到模型的 API。
控制器通常用于存储和表示模型数据和属性。它们就像代理一样，使您可以访问模型的属性并允许模板访问它们以动态渲染显示。这就是模板始终连接到控制器的原因。
要记住的主要事情是，当模型检索数据时，您将使用控制器以编程方式将该数据公开给应用程序的不同部分。虽然模型和控制器看起来紧密耦合，但事实上，模型本身并不知道稍后将使用它们的控制器。
您还可以存储需要保留但不需要保存到服务器的其他应用程序属性。
Ember.js 中的视图旨在管理围绕用户交互的事件，并将其转换为在应用程序中有意义的事件。因此，如果用户单击按钮来删除员工，则视图负责解释本机浏览器单击事件并在应用程序当前状态的上下文中对其进行适当处理。
Ember.js 帮助最大程度地减少所需代码量并在幕后为您处理事务的方法之一是通过命名约定。定义和命名路由（和资源）的方式会影响控制器、模型、视图和模板的命名。例如，如果我创建一条名为“employees”的路线：
App.Router.map( function() {
this.resource( 'employees' );
});
然后我会命名我的组件，如下所示：
Using this naming convention serves a dual purpose. First, it gives you semantic relationships between similar components. Second, Ember can automatically create necessary objects that may not exist (for example: route objects or controllers) and wire them up for use in your application. This is the "magic" I mentioned earlier. In fact, this is exactly what Ember does at the global application level when you instantiate an Application object:
var App = Ember.Application.create();
This single line creates default references to the application's routers, controllers, views, and templates.
Going back to the "employees" route I created above, when the user navigates to "/employees" in the application, Ember will look for the following objects:
If they are not found, it will create an instance of each but will not render anything because you have not specified a model to derive the data from or a template to use to display the data. This is why naming conventions are so important. It lets Ember know how to handle tasks related to a specific route without requiring you to connect manually.
Please note that in the first example, I used the singular name "Employee" to define the model. This is intentional. The nature of the name "employee" dictates that I may be working with zero to many employees, so it's important to build a model that has the flexibility to return one employee or all employees. A single naming convention for the model is not a requirement for Ember because the models themselves do not know the controllers that will later use them. Therefore, you can be flexible in naming them, but for the sake of consistency, sticking to this convention will make managing your code easier.
Additionally, I chose to use the resource() method to define my routes because in this case I would most likely be using nested routes to manage the details page for specific employee information. We'll discuss nesting later in this series.
The key takeaway is that by using a consistent naming scheme, Ember can easily manage the hooks that bind these components together without having to explicitly define the relationship through a lot of code.
Full details of Ember's naming convention are available on the project website, Must read.
In the next part of this series, we'll delve into the code to create the foundation for our application.
We have reviewed the core concepts of Ember and discussed key high-level aspects of the framework. In the next part of this series, we'll delve into the code to create the foundation for our application. In the meantime, I'd like to again recommend that you start looking at the documentation for Handlebars to understand the expression syntax. Also, if you really can't wait to get into Ember, stay tuned to Tuts Premium, which will soon offer a complete course that walks you through building Ember-based applications!
As I noted at the beginning of this article, Ember.js core team leads Yehuda Katz and Tom Dale reviewed this content for accuracy and gave it a thumbs up. Team Ember is approved! See you later!
The above is the detailed content of Embrace the world of Ember.js. For more information, please follow other related articles on the PHP Chinese website!
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
