Emberjs

Go into Emberjs
http://guides.emberjs.com/v1.11.0/concepts/core-concepts/
要开始Emberjs，有一些核心的概念需要理解。

Ember.js 设计出来时为了帮助开发者创建任意规模的可以和原生应用程序相媲美的web应用程序的。要做到这些需要新的工具和概念词典。

我们从像Cocoa和Smalltalk这样的原生应用程序框架中借用了一些创意。

然而，重要的是我们还是不能忘记web应用的特殊性。许多人认为之所以称一个应用程序为web应用程序，是因为它使用了一些像HTML，CSS和Javascript这样的技术。

事实上这些只是实现细节。

真正的之所以被称为为web应用程序，是源自它的书签和共享URL的能力。

URLs是赋予web应用程序极好的分享能力和合作能力的关键内容。今天，大部分的Javascript框架都不怎么重视URL，把它作为一个web成功的次要因素而不是主要因素。

Ember.js在URL的支持下将工具和原生GUI框架概念结合，创造出强大的web应用程序。

1、Templates：

由模板语言Handlebars编写，用于描述我们应用程序的用户接口的文件。每个模板背后都对应着一个model,模板会自动根据model中的数据变化更新自己template。

除了普通的HTML外，template还可以包含：

Expression：表达式，比如{{firstName}}，它的作用是从model中获取数据显示在template的HTML中。

Outlets：它用作其它模板的占位符，当用户访问我们的应用程序时，不同的模板可以通过router，将其它模板插入到Outlet定义的位置，我们可以使用{{outlet}}帮手来定义它。

Components：自定义HTML元素，你可以使用它来清理重复模板或者创建可以冲用的控件。

2、Router

router的功能是将一个URL转换成一系列的嵌套模板，这些嵌套的每一个模板背后都有自己的model与之对应。当显示给用户的template 或者 model

发生变化时，Ember自动维护浏览器地址栏中的URL，使之与当前的template和model想对应。

也就是说，在任何时候用户都可以分享URL，当某人点击这个分享链接时，他能看到与分享者看到的一样的内容。

3、Components:

它是一个自定义的HTML标签，我们使用javascript来实现它的行为，使用handlebar模板描述它的外观。我们用它来创建可以重用的控件。

4、Models

保存持久化状态的对象，Template 负责通过把model转换成HTML来显示model给用户。model是通过HTTP JSON API来加载的。

5、Route

它是用来告诉template，它要显示哪个model的定义对象。即，我们通过定义route来告诉template，它会显示哪个model内容。
http://guides.emberjs.com/v1.11.0/concepts/naming-conventions/
命名规范：

Ember.js使用一个运行时解析器来装配对象而不需要太多的引用代码。对于开发人员来说，只要将代码放置到代码约定的地方，解析器将自动处理它们。

Application：

当你的应用程序启动时，Ember将查找你项目中模块输出对象：

app/app.js

app/controllers/application.js

app/templates/appliction.hbs

Ember.js 将要渲染application模板作为主模板。如果controller: application 提供了的话，Ember.js将设置controller: application 的一个实例作为该模板的Contrller

这样就意味着 template可以从contrllor中获取它的属性了。

如果你的应用程序提供了一个route 在 app/routes/application.js 文件中，Ember.js 会在渲染application.js模板之前首先调用router的hooks。

钩子hooks作为方法来实现，并在Ember对象的生命周期中提供访问点，来截取并执行代码来修改默认行为。

Ember提供了许多钩子hooks以满足你不同需要，比如model，setupController等。

下面的实例中，route:application Route，它是一个Ember.Route对象，它实现了setupController hook.

app/routes/application.js

export default Ember.Route.extend({

setupController: function(controller){

controller.set('title',"Hello world!");

}

});

app/controllers/application.js

export default Ember.Controller.extend({

appName: 'My First Example'

});

app/templates/application.hbs

<h1>{{appName}}</h1>

<h2>{{title}}</h2>

在Ember.js应用程序中，你需要总是用类来提供对象。框架负责实例化它们并在运行时通过解析器将它们提供给你的模板。

简单Routes：

每一个route都将有一个与之同名的controller 和 template。

app/router.js

export default Ember.Router.extend().map(function(){

this.route('favorites');

});

如果用户导航到 /favorites , Ember.js 将会查找如下类：

app/routes/favorites.js

app/controllers/favorites.js

app/templates/favorites.hbs

Ember.js会渲染favories模板到application 模板的{{outlet}}区域，并设置一个favorite controller实例给该模板。

如果你的应用程序提供一个route ：favorites, 框架将会在渲染template之前调用它。

我们可以在这个route里实现 model 钩子来指定 controller要展示哪个model到template。

app/routes/favorites.js

export default Ember.Route.extend({

model: function(){

//the model is an Array of all of the posts fetched from this url

return $.ajax('/a/service/url/where/posts/live');

}

});

在该例中，我们没有提供controller:favorites, 因为model是个数组，Ember.js将自动提供一个Ember.ArrayController, 它将背后的数组表现为一个model。

你可以认为Ember.ArrayController 就是model本身，这样好处有：

你可以随时替换controller的model而不需要通知view 发生了什么变化。

controller可以提供额外的计算属性或者视图特有的状态值而它们有不属于model层所有，这样就可以达到View，Controller和Model之间的关注点分离。

下面模板负责循环显示controller中的元素：

<ul>

{{#each item in controller}}

<li>{{item.title}}</li>

{{/each}}

</ul>

URL动态参数

如果一个route使用了动态片段（即一个URL包含一个参数），该route的model会基于用户提供的该片段值进行加载。

export defualt Ember.Router.extend().map(function(){

this.route('post', {path: '/posts/:post_id'});

});

这种情况下，route的名称为post，所以Ember.js会查找如下三个对应的对象：

app/routes/post.js

app/controllers/post.js

app/templates/post.hbs

你route的model 钩子将会转换动态的:post_id参数到model中。

serialize 钩子会换转model对象到URL参数。

app/routes/post.js

export default Ember.Route.extend({

model: function(params){

return $.ajax('/my-service/posts/" + params.post_id);

},

serialize: function(post){

return {post_id: Ember.get(post, 'id')};

}

});

由于上面的内容对于所有route来说都太通用了，所以它们是route的默认内容。

如果你的动态片段是以_id 结尾，默认的model钩子会转换该参数的前半部分到一个model类，然后调用其find方法传入该动态参数值。

serialize钩子 默认行为是使用model的id属性替换动态片段参数。

默认的Route，Controller和Template

如果我们没有为post指定route，Ember仍然会使用app/controllers/post.js渲染app/templates/post.hbs模板。

如果我们没有为post指定controller，Ember会自动基于model钩子的返回值来自动生成一个controller。

如果model钩子的返回值是一个数组，那么Ember会自动生成一个ArrayController,如果不是数组，那么Ember会自动为其生成一个ObjectController。

如果我们没有为post生成template，Ember.js 将不会渲染任何东西。

NESTING 嵌套：

我们可以在resource 下面嵌套定义routes

export default Ember.Router.extend().map(function(){

this.route('posts',function(){

this.route('favorites');

this.route('post');

});

)};

下面是这个router里定义的routes的命名规则：

Route Name Controller Route Template

-------------------------------------------------------------------------------------------------------------------------------------------

posts app/controllers/posts.js app/routes/posts.js app/templates/posts.hbs

posts.favorites app/controllers/posts/favorites.js app/routes/posts/favorites.js app/templates/posts/favorites.hbs

post app/controllers/posts/post.js app/routes/posts/post.js app/templates/posts/post.hbs

关于Index route：

在嵌套定义的每一层，Ember.js自动提供一个名为index的route 对应着该层目录的 /

app/router.js

export default Ember.Router.extend().map(function(){

this.route('index',{path: '/'});

this.route('favorites');

});

如果用户访问 / ，Ember会查找如下内容：

app/routes/index.js

app/controllers/index.js

app/templates/index.hbs

此时index.hbs模板会被渲染到application.hbs模板的{{outlet}}区域。如果用户定位到/favorites ，则Ember会用favorites.hbs替换index.hbs 显示在application.hbs定义的{{outlet}}区域。

app/router.js

export default Ember.Router.extend().map(function(){

this.route('posts', function() {

this.route('favorites');

});

});

等价于：

app/router.js

export default Ember.Router.extend().map(function(){

this.route('index', { path: '/' });

this.route('posts', function() {

this.route('index', { path: '/' });

this.route('favorites');

});

});

如果用户访问 /posts , 那么它对应的当前route应该是posts.index,相应的Ember会查找如下内容：

app/routes/posts/index.js

app/controllers/posts/index.js

app/templates/posts/index.hbs

首先，posts.hbs模板会被渲染到application.hbs模板的{{outlet}},然后，posts/index.hbs模板会被渲染到posts.hbs的{{outlet}}区域。

如果用户访问/posts/favorites , Ember会使用posts/favorites.hbs替换posts.hbs模板的{{outlet}}部分。