在本系列教程中，你将会学到使用Ember.js开发一个简单的应用。你将会学到Ember.js是如何实现MVC架构的，以及Ember API的关键部分。
设置Ember.js
初学Ember.js的一个好的开端是使用又Ember开发团队创建的初学者套件。这个初学者套件将为你提供一个快速上手Ember.js的框架。你可以在Windows，Mac OS X以及Linux操作系统上使用这个初学者套件。对Ember.js的后端支持最常用的是Rails，其中包含了许多对Ember提供支持的gem。Node.js以及Django对于Ember也都提供了相应的支持。
在本教程中我们使用的浏览器是Google Chrome浏览器。另外你可以使用任何能够编辑JavaScript和HTML的文本编辑器。Ember提供的初学者套件将会帮助我们创建一个简单的应用。
从https://github.com/emberjs/starter-kit/ downloads下载最新的初学者套件，然后完成以下步骤：
1.下崽完成后，解压zip文件。解压后的文件夹名字应该为starter-kit。 2.进入改文件夹，你会看到子文件夹css和js以及主文件index.html。 3.进入js文件夹并创建三个名字分别为views，models和controller的子文件夹。
我们现在可以对已经存在的文件进行一些修改并且添加一些我们需要的东西：
1.我们首先在js文件夹中找出app.js文件然后在其中加入下面的带代码：
var MovieTracker = Ember.Application.create();
2.在controllers文件夹中，我们创建一个叫做application.js的文件，在其中加入下面的代码：
MovieTracker.ApplicationController = Ember.Controller.extend();
3.在你的index.html文件中，添加下面这行代码：
<script src='js/controllers/application.js'></script>
4.现在我们已经在app.js中有了一个良好的开端，现在我们来创建一个简单的路由。创建一个叫做router.js的文件。在这个文件中，我们提那家下面的代码：
MovieTracker.Router = Ember.Router.extend({
root: Ember.Route.extend({
index: Ember.Router.extend({
route:'/'
})
})
});
5.在你的index.html文件中，添加以下代码：
<script src='js/route.js'></script>
6.我们要做的最后一件事是创建几个视图。将下面的代码粘贴到views文件夹中的application.js文件中：
MovieTracker.ApplicationView = Ember.View.extend({
template: 'application'
});
在index.html文件中，添加下面代码：
<script src='js/application.js'></script>
7.在index.html文件的
标签中添加下面的Handlbars模板： <script type='text/x-handlebars' data-template-name='application'>
</script>
css文件夹中包含了我们应用所需要的样式表。这个样式表包含了HTML5 模板去规范化样式，无论我们使用的是什么浏览器。
js文件夹包含一个叫做libs的子文件夹以及一个叫做app.js的文件。libs文件夹包含了你任何你想包含进来的js库。app.js文件包含了你的Ember应用的结构。
index.html是一个基本的HTML文件，它将信息显示在浏览器中。我们将使用这个文件作为我们创造的应用的主页面。
我们在这里创建了一个叫做MovieTracker的命名空间，在其中我们可以获取必要的Ember.js组件。Initialize()将会初始化所有命名空间中可用的控制器。在初始化完成之后，它将所有的控制器注入到一个路由中。
我们接着将ApplicationController作为我们视图的渲染上下文。你的应用必须包含ApplicationController，否则你的应用将不能够渲染动态模板。
Router在Ember中是StateManager的子类。StateManager追踪现在被激活的状态并在状态改变是出发回调。这个路由会帮助你将URL匹配到应用的状态并探测应用载入时的浏览器URL。这个路由负责更新URL和状态的改变。
当Ember解析URL去决定状态时，它试图寻找Ember.Router来匹配状态。我们的路由必须包括root和index。你可以将root看做是一个包含路径的容器。它是一个路径的集合。
index可以根据你的喜好来命名。如果你载入了一个URL后面跟着/的页面，Ember将会匹配root.index并将你的应用转换到root状态然后变为root状态中的index状态。
一个Ember视图负责通过和视图相关的模板组织页面。一个视图同时也负责注册和相应用户事件。
ApplicationView对于Ember应用来所是必须的。我们创建的视图和ApplicationController也有联系。templateName变量是我们在index.html中使用的名字。templateName可以依据你的喜好来进行修改。
我们接在在视图中引用templateName变量。
创建一个Ember模型/对象
一个对象或者模型是一种结构化组织数据的方式。换句话说，它们是一种在你的应用中呈现持久状态的方式。在Ember.js中，几乎每一个对象都由Ember.Object派生而来。既然几乎所有对象都有同一个基础对象派生而来，它们都享有同样的属性。这允许我们观察并绑定这些对象的属性。这也就是说，我们可以从中看到许多Ember的特性，例如计算属性和绑定。
我们将创建一个基本的模型对象然后创建一个该对象的子类：
1.在你的models文件中，创建一个叫做movie.js的文件：
MovieTracker.Movie = Ember.Object,extend({
id:null,
title:null,
watched:false,
rating: 0
});
2.在index.html文件中添加下面代码：
<script src='js/models/movie.js'></script>
3.我们现在可以通过在浏览器的控制台中创建一个新的对象并输出title来测试我们的模型。在浏览器的控制台的输入下面带按摩。你可以看到The Action Movie被输出到了控制台中。
var actionMovie = MovieTracker.Movie.create({
title: "The Action Movie"
});
actionMovie.get("title");
4.我们也可以扩展Ember.Object的后代来创造我们自己的类。在movie.js最近偶你，我们添加下面的代码：
MovieTracker.ActionMovie = MovieTracker.Movie.extend({
genre: "action"
});
我们定义了我们的模型并依据这个模型创建了一些新的对象。在前面的例子中，我们创建了一个叫做Movie的对象，它拥有ID，一个title（如果看过的话）以及它的评分。
我们的ActionMovie和Movie拥有一些相同的属性，但是添加了额外的属性。genre属性将会定义电影的类型。将下面的代码输入在你的浏览器控制台中：
var actionMovie = MovieTracker.ActionMovie.create({
title: "An Action Movie"
});
action.movie.get("genre");
前面的代码将会在控制台中输出action。它创建了一个新的ActionMovie对象，并继承了genre属性。
加强一个Ember对象
现在我们已经有一些基本的Ember对象，我们可以开始让它们变得更强大了。Ember.js的文档推荐三个特性。其中两个就是处理对象的特性。其中一个是自动更新模板，另外两个是绑定和和计算属性。在这一节中，我们主要讲解绑定和计算属性。
现在我们已经有了一些在对象中定义的基本Ember对象，我们可以继续为它们添加一些功能：
1.我们可以使用绑定来展现演员，因此在models文件夹中创建一个叫做actor.js的文件并添加下面代码：
MovieTracker。Actor = Ember.Object.extend({
filmBinding: 'MovieTracker.Movie.title'
});
2.在index.html中我们添加下面的代码：
<script src='js/models/actor.js'></script>
绑定被用来保持两个不同对象间的属性同步。
计算属性函数就和我们一般的模型属性一样。它们也可以用于数据绑定。计算属性被用来通过合并其他属性创建新的属性。它们不应该包含任何应用行为。在大多数情况下，多次调用一个计算属性应该总是返回同一个值。
当被观察的属性改变时一个观察者将会被出发，当你需要在一个绑定被同步后进行一些行为操作时这相当有用。
你会注意到这里有一个叫做filmBinding的属性。当Ember.js探测到一恶搞以字符串Binding结尾的属性时，Ember会自动为你创建一个绑定属性（在这里的情况中该属性叫做film）。
计算属性，混入类，以及观察者为我们提供了一些与数据交互的不同方式。
计算属性
计算属性允许我们在模型中国创建函数：
MovieTracker.Movie = Ember.Object.extend({
id:null,
title:null,
watched: false,
rating: 0,
titleAndRating: function(){
return this.get('title') + ' has a rating of '+ this.get('rating');
}.property()
});
在这里，我们创建了一个叫做titleAndRating的函数它将合并title和rating到一个字符串中。计算属性通常依赖于其他的1属性。在我们创建的这个例子中，我们可以告诉Ember我们的titleAndRating函数通过在属性括号中添加参数来依赖于电影的title和rating：
MovieTracker.Movie = Ember.Object.extend({
id:null,
title:null,
watched: false,
rating: 0,
titleAndRating: function(){
return this.get('title') + ' has a rating of ' +
this.get('rating');
}.property('title','rating')
});
如果我们想要测试输出，我们可以尝试着获取一个我们创建的电影的title和rating.将下面的代码输入到浏览器的控制台中：
var comedyMovie = MovieTracker.Movie.create({
title: 'A Comedy Movie',
rating: 5
});
comedyMovie.get('titleAndRating');
上面的代码将会在控制台中输出A Comedy Movie has a rating of 5。
混入类
Ember.js另一个有用的部分是混入类。一个混入类是一个对象，它定义了一系列和一个类型相关的函数。在我们的情形中，我们可以复制并粘贴下面的代码到movie.js的顶部：
WatchedMixin = Ember.Mixin.create({
isWatched : function(){
var title = this.get('title'),
watched = this.get('watched');
return ('Has ' + title + ' been watched? ' + watched);
}
});
我们接下来可以将混入类提那家进入我们的Movie对象中，通过将它作为第一个参数传递给.extend或者.create：
MovieTracker.Movie = Ember.Object.extend(MovieTracker.WatchedMixin,{
id: null,
title: null,
watched: false
});
我们接着可以在控制台中输入下面的代码来验证一下混入类：
var watchedMovie = MovieTracker.Movie.create({
title: 'A Watched Movie',
rating: 5,
watched: true
});
watchedMovie.isWatched();
上面的代码将会输出 Has A Watched Movie been watched?true。我们创建了一个叫做Watched的混入对象，它包含一个可以添加到任何Ember对象中的函数。这个扩展对象将会拥有一些和这个混入类相关联的函数。
观察者
Ember.js也可以使用一些叫做观察者的东西。我们可以改变我们的Movie对象来包含一个观察者：
MovieTracker.Movie = Ember.Object.extend(MovieTracker.WatchedMixin,{
id: null,
title: null,
watched: false,
rating: 0,
titleAndRating: function(){
return this.get('title') + ' has a rating of ' + this.get('rating');
}.property('title','rating'),
titleChanged: function(){
console.log('Title changed!')
}.observes('title');
});
刷次页面来载入新的变化，然后通过下面的代码重新创建我们的comedy movie：
var comedyMovie = MovieTracker.Movie.create({
title: 'A Comedy Movie',
rating: 5
});
如果我们改变了title：
comedyMovie.set('title', 'Comedy Movie 2');
我们会看到控制台中输出了 Title changed!
我们为title添加了一个观察者，因此无论title发生什么变化，相应的函数(titleChanged)都会被触发。
创建一个Ember控制器
一个控制器是一个可以储存应用状态的对象。应用的视图与控制器相关联并且将控制器的当前状态转换为HTML。另一个思考控制器的方法是将它们看做一个你的模型的直接表示法并且可以通过视图上的行为发送CRUD命令到模型。
我们现在可以为我们的应用一部分创建一个控制器：
1.在controllers文件夹中的application.js文件中添加下面的代码：
MovieTracker.movieController = Ember.ArrayController.create({
content:[],
init:function(){
this._sper();
var list = [
MovieTracker.Movie.create({
title: 'Movie 1',
ratingL 4
}),
MovieTracker.Movie.create({
tittle: 'Movie 2',
rating: 5
})];
this.set('content',list);
}
});
2.我们也可以创建一个控制器来帮助我们追踪一部在应用中被用户选择的电影：
MovieTracker.selectedMovieController =
Ember.ObjectController.create({
slectedMovie: [].
select: fucntion(item){
this.set('selectedMovie'. item);
},
toggleWatched: function(){
this.selectedMovie.toggleProperty('watched');
}
});
在Ember.js中，控制器可以分为三类：
- ArrayController
- ObjectController
- Controller
ArrayController被用来管理一个对象集合，在这里，也就是一个电影和演员的集合。每一个ArrayController使用一个content属性来储存数据。控制器中的属性和方法都将有一个允许器获取content属性的代理器。在movieController中，我们创建了一个空的content数列并且为它赋予了一些样例数据。调用this._super()方法将会允许你获取父类的init函数。
ObjectController在本质上和ArrayController相同，除了他被用于一个对象而不是一个对象集合。在我们的应用中，我们将需要一个控制器在用户点击相应按钮的时候改变电影的watched属性。在selectedMovieController中国，我们可以只关心一个特定的Movie对象。这个在控制器中的函数将会改变相关电影的watched属性。
Ember中的Controller类在当你不需要一个代理器的时候被使用。换句话说，这个控制器不需要关心一个对象或者一个数组。
如果你回头看看位于controllers文件夹中的application.js中的代码，我们可以添加下面的代码：
MovieTracker.ApplicationController = Ember.Controller.extend();
这一行代码并没有包含任何数组或者对象，因此我们简单的将它赋值给一个Controller。这个控制器在应用的层面上处理控制行为。
我们可以在浏览器控制台中输入下面代码来检查一下movieController是否正常运行：
MovieTracker.movieController.get('length');
上面的代码将会在控制台中输出2。
评论都支持MD，双击添加评论很个性呀