Enter Ember. js (1)

Now there are many JavaScript libraries, most of which meet your website's DOM-related operations. However, there is an urgent need to manage the code of a single application, which is why the new framework is generated.

"The old saying goes: the knife should be used on the blade. "

Ember. js doesn't want to be like JQuery in the traditional way. It won't give you a good desktop experience, no related columns, lack of data binding, events, and status management. In general, you may be able to piece together the relevant plug-ins to implement these functions. However, there are specialized frameworks to solve these professional problems. In my opinion, it's a perfect thing. The old saying goes: "The knife should be used on the blade. "

I recently interviewed the Ember. js team. How exciting it is to know about the latest and most popular: Ember. js

Ember has implemented the functions I have described above. Its popularity reminds me of JQuery's Quick Start for developers. In terms of design methods, the team took measures and abstracted a lot of complexity and relied on years of practical experience in large-scale applications to establish models, views, and controllers for application.

Through the introduction of many articles (it will gradually introduce the core concepts of this framework), I want you to learn more about Ember. js.

At first, we started with a general introduction (introduced in this article) and gradually created a complete project. Through my understanding of some concepts, I want you to enhance your understanding of some core concepts. In this way, you may learn new technologies. I have done my best to allow the Ember. js team to review the possibility and accuracy of this document and provide valuable comments.

Before we started, there was a saying: Ember. js has done so many amazing things for me. When I saw the code, I said to myself, "Wow, how is this done. "I will introduce the source code of the Ember's framework as much as possible here, I will discuss how to create your application through its APIs and tools.

So let's start that step.

Core concepts

Ember. js is not a simple framework for traditional websites.

First, remember that Ember. js is not a simple framework for traditional websites. JQuery and MooTools are more suitable for traditional websites. Your focus on Ember. js is a scalable desktop experience. In fact, the Framework slogan creates a perfect Web application, which clearly tells you that this is not a Javascript parent frame.

I previously mentioned that Ember uses the MVC mode to facilitate code management and organization. If you have never had the foundation for MVC development, you must first understand this concept. Nettuts + has many good articles on this topic. When you are familiar with these concepts, you will be clear at a glance ., I often hear that transforming the background into Ember. js is actually a very simple thing. Because Ember has done a lot of heavy work for you, but developers must get used to the code structure.

Ember also depends on client templates... there are many. It uses the Handlebars template framework and uses a series of expressions to create dynamic HTML pages for you. For these embedded page expressions, the Ember developer can bind data and quickly change their display dynamically. For example, I create a template that accepts an array of people and displays them unordered:

 
 

  
  
<ul> 
  
  
 {{#each people}} 
  
  
   <li>Hello, {{name}}!</li> 
  
  
 {{/each}} 
  
  
</ul> 
 
 

Note: "# each" is a loop expression that lists every "people" array element and replaces "{name}" with a real value. Note that the {} syntax uses Handebars to verify the expression. This is a simple example. I will introduce it in detail later.

Handlebars is a powerful client template engine. I recommend not only viewing The Ember wizard, but also getting useful information from its own website. You will use it very well.

Configure Ember

Eember. js relies on traditional class libraries such as JQuery and Handlerbars.

But wait a moment. Didn't I say JQuery and Ember are used in different places? Yes, I said. However, in some cases, the Ember team does not want to create the wheel again. they chose JQuery because JQuery is the best way to operate the DOM, Which is perfect. in the same way, why do they choose Handlerbars? Because it is a pretty good template, Yehuda Katz is the implementation, and he is one of the core developers of Ember.

Through the Github dependent library tool, we can easily capture the Ember. js we need. This is a simple example. The current location, which contains

• E-mapreduce 1.0 RC1
• Handlerbars 1.0 RC3
• JQuery 1.9.1

There is now a basic html page template that contains all the relevant frameworks (JQuery, Ember, etc ). It also includes a Handlebars example and a basic Ember application called "app. js ".

 
 

  
  
<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> 
 
 

Ember Problems

Before writing code, it is very important to understand the working principles of Ember. js. You gather relevant modules to form your Ember application. Let's take a look at the relationships between other parts and them.

Template

For your interface, templates are a key part. As I mentioned earlier, Handlebars is a client framework used in Ember. For your application, expressions can be expanded when you create an interface. Here is a simple example ::

 
 

  
  
<script type="text/x-handlebars"> 
  
  
      
  
</script> 
 
 

Note: The Ember expression forms an HTML page, which can dynamically change the page content. In this example, the {firstName} and {lastName} placeholders will be replaced by data in the application.

With flexible APIs, Handlebars can provide powerful functions. What features it provides is very important for you.