Some Learning summaries of Ember. js (1)

Source: Internet
Author: User

Now, we can often see complex JavaScript applications. As these applications become more and more complex, a long string of jQuery callback statements or different function calls are executed in different States through applications, these practices will become unacceptable, which leads JavaScript developers to start looking for a better way of development that is organized and more efficient.

One of the most common architecture modes to achieve organization and efficiency is the well-known Model View Controller MVC, this mode encourages developers to divide different parts of their applications into modules that are easier to manage. We do not need to use a function to directly call the database by creating a Model or entity) to manage databases; to simplify code display through Template or View); finally, to process the requests of our applications by using Controller, the MVC mode minimizes the Coupling Degree between each module and provides program development efficiency.

The well-known Javascript MVC frameworks include Ember. js, Backbone. js, Knockout. js, Spine. js, Batman. js, and Angular. js.

Figure 1 Javascript MVC framework

Through this, we can clearly understand the features, complexity, and learning curve differences between Javascript MVC frameworks. From left to right, we can see whether various Javascript MVC frameworks support Data Binding) template Templating, persistence, and other features, the complexity of the MVC Framework increases from bottom to top. To be honest, I have not compared the advantages and disadvantages of each framework, if you have made some comparisons or read related articles, you will not be enlightened.

In the next blog, we will introduce the use of Ember. js.

1.1.2 text

Ember. js is a JavaScript MVC framework that evolved from the rename of SproutCore 2.0 created by Apple's former employee. Ember has been released to 1.0.0-RC.3.

MVC Definition

 

Before introducing Ember, let's first review the MVC pattern. Here we will introduce the role of MVC pattern in programming through an example, for example:

1. the user performs an operation, such as hitting the keyboard or clicking the mouse button.

2. Controller) receives the input and triggers a message to the Model ).

3. Modify the CRUD operation of the model based on the message content ).

4. View) monitors changes in the model and displays corresponding updates on the user interface.

Through the above, we learned the role and connection between various components in MVC. After learning about the MVC mode, we can make it clearer whether Javascript MVC frameworks need to be introduced in our project.

When building an Ember Application, we will use six main components: Application), Model), View), Template), and Routing) and Controller ).

Next, we will introduce the use of Ember by implementing a specific program.

Set Ember

First, we need to reference a series of Javascript libraries, So we add js files in the program and save the following js files to this folder:

Ember. js: ember 1.0.0-rc.3

Ember-data.js: revision 12.

Handlebars. js: handlebars 1.2.rc.3

Jquery. js: jQuery 1.9.1

App. js: Our application code

Renewal page.

 
 
  1. <!DOCTYPE html> 
  2.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
  3.     <meta http-equiv="description" content="" /> 
  4.     <meta name="description" content="" /> 
  5.     <meta name="keywords" content="" /> 
  6.     <meta name="author" content="" /> 
  7.     <title></title> 
  8.     <link rel="stylesheet" href="" type="text/css" /> 
  9.     <link rel="stylesheet" href="" type="text/css" /> 
  10. <body> 
  11.     <!-- Add Javascript libs Reference --> 
  12.     <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
  13.     <script src="js/libs/handlebars-1.0.0-rc.3.js"></script> 
  14.     <script src="js/libs/ember-1.0.0-rc.2.js"></script> 
  15.     <script src="js/libs/ember-data.js"></script> 
  16.     <script src="js/app.js"></script> 
  17. </body> 

Now we have implemented the first Ember program, but it does not have specific features. Next, we will add features to the program.


Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.