Home > Developer > JavaScript
write by Yinmingjun, please indicate the reference.
After watching knockout and angular, some of the meaning is still not done, feel the web in the field of spa exploration should not stop here, so began to look at the Ember.js framework, I hope ember.js can bring me surprises. Ember.js has fewer resources on the web, official document coverage and depth, and many details need to be found in the code. But back to the ember.js framework itself, this framework does bring me a lot of surprises, let me have to write the desire to introduce it. This paper interprets ember.js from the perspective of frame and concept, and the in-depth study of each part of Ember.js will be written in subsequent articles.
When I first looked at the core concept of Ember, I was surprised to see the word router .
After a closer look at Ember, my suspicions were confirmed: Ember did organize its MVC architecture through router as a core concept. This approach is similar to some of the MVC frameworks currently prevalent on the server side (asp.net mvc, Django, Express, etc.), and when the concept of router appears in client-facing ember, we can basically guess Ember has moved the state migration between pages into its own problem area.
In addition, Ember detailed planning of the model, view and Controller division of responsibilities, and support two-way data binding.
Ember's other place that I was surprised was ember.data. The client's JS framework is rarely involved in the field of entity relations, the author once in the company has done similar JS entity Relationship Mapping system, know its complexity and value. Ember the definition and entity relationships of entities into their problem areas, is the Gospel of many JS developers, Ember.data helps us to liberate from the details of data management. However, Ember.data is not the focus of this article, the author will write a special article to introduce it, this article is simply to introduce its role in the Ember.js system.
In reading here, people will not have this feeling: Ember will be too heavy. Ember JS Size (v1.0.0 version) compressed 200K, uncompressed has 800K, indeed amazing, also does not include Ember.data (v0.13 version, 250k,70k size) and handlebar js size. These messages can give us some insight, Ember is a future-oriented, heavy-duty Web application Support framework, the use of a good design and planning, if it is not clear that this positioning may lead to ember use of failure experience, this please understand.
Coming to the point, we'll step through the core concepts in Ember to understand the architecture of the Ember application.
first, starting from the demo
Here is a demo from Ember's official website, let's take a look at the code.
Html:
<! DOCTYPE html>
<meta charset= "Utf-8" >
<title>ember Starter kit</title>
<link rel= "stylesheet" href= "Css/normalize.css" >
<link rel= "stylesheet" href= "Css/style.css" >
<body>
<script type= "Text/x-handlebars" >
{{Outlet}}}
</script>
<script type= "Text/x-handlebars" data-template-name= "index" >
<ul> {{#each item in model}}
<li>{{item}}</li>
{{/each}}}
</ul>
</script>
<script src= "Js/libs/jquery-1.9.1.js" ></script>
<script src= "Js/libs/handlebars-1.0.0-rc.4.js" ></script>
<script src= "Js/libs/ember-1.0.0-rc.5.js" ></script>
<script src= "Js/app.js" ></script>
</body>
App.js:
APP = Ember.Application.create ();
App.Router.map (function () {
Put your routes
});
App.indexroute = Ember.Route.extend ({
Model:function () {
return [' Red ', ' yellow ', ' blue '];
}
});
The example is simple, just create a ember appliation, and then bind the data in the model to Li in turn. However, in the application architecture perspective, this example covers the main features of the Ember. Note that the type of the script tag is text/x-handlebars. Ember crawls this content when it loads the page.
In this example, we can basically see the main thread of the Ember application architecture pattern.
1, default '/' to app.indexroute mapping
Omitted equivalent code:
App.Router.map (function () {this.resource (' index ', {path: '/'});};
2, the default creation of Indexroute controller
Omitted code:
App.indexroute = Ember.Route.extend ({
Setupcontroller:function (Controller) {
Controller.set (' content ', [' Red ', ' yellow ', ' blue ']);
}
});
3, the default application template
Omitted the name of the applicaion template:
<script type= "Text/x-handlebars" data-template-name= "Application" >
{{Outlet}}}
</script>
4. App.indexroute reference to the template named ' Index '
5. Binding of {{outlet}} and ' index ' template after program startup
This name mapping approach can dramatically reduce the amount of configuration work that is widely used in modern MVC systems, and Ember has introduced this approach. We will elaborate on the way Ember name Mapping in detail later.
In fact, if it's easiest to create a ember application, you need only one line of code:
APP = Ember.Application.create ({});
The ember will be followed by the following code:
Create the Application namespace
APP = Ember.Application.create ({});
Create the global router to manage page state via URLs
App.Router.map (function () {});
Create the default application route to set Application-level State properties
App.applicationroute = Ember.Route.extend ({});
Create the default Application template
<script type= "Text/x-handlebars" data-template-name= "Application" >
{{Outlet}}}
</script>
From this demo, we can see concepts such as Application,router,template,controller,model, which we will briefly explain in the next section.
Ii. Basic concepts of Ember
To be easy to understand, these concepts are described as simply as possible without introducing complex factors.
1, the concept of application
In Ember, creating a applicaion is very simple and requires only one line of code:
Window. APP = Ember.Application.create ();
The app's variable name is anything, and the app can be used as a carrier for application level status and data. For example, you create a view in an app that says:
App.myview = Ember.View.extend ();
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
