Ember.js使用一个运行时解析器去连接你的对象而没有很多样板文件。作为一个开发者,如果你把code放到约定好的位置这个解析器会自动工作。
 
一、The Application
    1. 当你的app启动时,Ember.js将渲染application template作为主要模板。
 
     2. 如果提供了controller:application, Ember.js将设置一个controller:application的实例作为template的controller。这意味着,这个template将从controller中获取属性。
 
    3. 如果app提供了一个路由app/routes/application.js,Ember.js将在加载application template之前先调用这个路由的挂钩。
       钩子作为方法被实现,在Ember对象的生命周期内,它们提供访问点通过拦截和执行代码去修改这些访问点的默认行为来满足你的需求。
       Ember为了各种各样的目的提供了许多可用的hooks。
 
    4. example:
  下面是一个使用route,controller和template的简单的例子:
  • app/routes/application.js
 export default Ember.Route.extend({
model() {
return { title: "Hello World" };
}
});
  • app/controllers/application.js
 export default Ember.Controller.extend({
appName: 'My First Example'
});
  • app/templates/application/hbs
 <h1>{{appName}}</h1>
<h2>{{model.title}}</h2>

5. 在Ember.js应用程序中,你总会提供你的对象作为类,框架负责实例化它们并通过运行时解析器把它们提供给templates。

二、Simplement Routes(简单路由)

1. 每一个route都会有一个和它名字相同的controller和template。

2. A simple router:

 var Router = Ember.Router.extend();

 Router.map(function () {
this.route('favorites');
}); export default Router;
  • 如果你的用户导航到/favorites,Ember.js将会在你的项目中需找下面这些类:

    • app/routes/favorites.js
    • app/controllers/favorites.js
    • app/templates/favorites.js
  • Ember.js将会把favorites template加载到application template{{outlet}}中。它将会设置一个controller:favorites的实例作为templatecontroller
  • 如果你的app提供了一个route:favorites,这个框架会在加载template之前调用它。

3. 对于一个类似route:favorites这样的路由,你可能会实现model hook去指定你的controller将会把哪个model展现到模板。

example:

 import ajax from 'ic-ajax';

 export default Ember.Route.extend({
model() {
//the model is an Array of all of the posts
//fetched from this url
reutrn ajax('/a/service/url/where/posts/live');
}
});
  • 在这个例子中,我们没有提供一个controller:favorites。因为model是一个数组,Ember.js会自动提供一个Ember.ArrayController的实例,它会展现backing Array作为它的模型。
  • 你可以把Ember.ArrayController看做犹如模型本身。这么做的好处就是,你可以随时更换controller的model,而无需直接通知模板和组件的变化。

4. template可以遍历控制器的元素:

 <ul>
{{#each controller as |item|}}
<li>{{item.title}}</li>
{{/each}}
</ul>

三、动态段(a URL that includes a parameter)

如果route使用动态段(一个包含参数的URL),路由的model将会基于用户提供的动态段的值。

1. 考虑一下这个路由定义

app/router.js

var Router = Ember.Router.extend();

Router.map(function () {
this.route('post', { path: '/posts/:post_id' });
}); export default Router
  • 在这个例子中,route的名字是post,所以Ember.js将会查找这些对象:

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

2. 路由的处理程序的model hook会把动态参数:post_id转换进model中。serialize hook把一个模型对象转换回这个路由的URL参数(例如,为模型对象生成一个link)。

app/routes/post.js

import ajax from 'ic-ajax'

export default Ember.Route.extend({
model(params) {
return ajax('/my-service/posts/' + params.post_id);
},
  
serialize(post) {
return { post_id: Ember.get(post, 'id') };
}
});

3. 因为这种现象非常普遍,它是默认的路由处理程序。

  • 如果动态字段以_id结尾,默认的model hook将把第一部分转换为应用程序命名空间中的一个模型类(post looks for app/models/post.js)。然后它会调用类中的find获得动态字段的值。
  • serialize hook的默认行为是用model objectid属性的值替换route的动态字段。

四、 Route,Controller和Template Defaults

1. 如果你没有为post route(app/routes/post.js)指定一个路由处理器,Ember.js仍然会使用app的app/controllers/post.js实例去渲染app/templates/post.hbs模板。

2. 如果你没有指定controller(app/controllers/post.js),Ember将会基于routemodel hook返回的值生成一个。如果model是一个Array,你会得到一个ArrayController。或则,你会得到一个ObjectController

3. 如果你没有指定一个post模板,Ember.js什么都不会渲染。

五、Nesting(嵌套)

你可以嵌套路由:

app/router.js

var Router = Ember.Router.extend();

Router.map(function () {
this.route('posts', function() { //the 'posts' route
this.route('favorites'); //the 'posts.favorites' route
this.route('post'); //the 'posts.post' route
});
}); export default Router

下面是这个路由器中每个route的命名约定:

六、The Index Route

在每个级别的嵌套(包括顶层),Ember.js自动为路径"/"提供一个名为indexroute

1. example:

app/router.js

var Router = Ember.Router.extend();

Router.map(function () {
this.route('favorites');
}); export default Router;

这相当于:

var Router = Ember.Router.extend();

Router.map(function () {
this.route('index', { path: '/' });
this.route('favorites');
}); export default Router;

如果用户访问'/',Ember.js将会查找这些对象:

  • app/routes/index.js
  • app/controllers/index.js
  • app/templates/index.hbs

index模板将会渲染到application模板的{{outlet}}中。如果用户导航到/favorites,Ember.js将会使用favorites template替换index template

2. 一个嵌套的路由器

app/router.js

var Router = Ember.Router.extend();

Router.map(function () {
this.route('posts', function () {
this.route('favorites');
});
}); export default Router;

这相当于:

app/router.js

var Router = Ember.Router.extend();

Router.map(function () {
this.route('index', { path: '/' });
this.route('posts', function () {
this.route('index', { path: '/' });
this.route('favorites');
});
}); export default Router;

如果用户导航到/posts,当前路由将会是posts.index,Ember.js将会查找以下objects:

  • app/routes/posts/index.js
  • app/routes/posts/index.js
  • app/templates/posts/index.hbs

首先,posts模板将会被渲染到application模板的{{outlet}}中。然后,posts/index模板将会被渲染到posts模板的{{outlet}}中。

如果用户导航到posts/favorites,Ember.js将会用posts/favorites模板替换posts模板中的{{outlet}}

1.2 Getting Started--Naming Conventions(命名约定)的更多相关文章

  1. Effective Java 56 Adhere to generally accepted naming conventions

    Typographical naming conventions Identifier Type Type Examples Package com.google.inject, org.joda.t ...

  2. Naming Conventions for .NET / C# Projects

    http://www.akadia.com/services/naming_conventions.html Naming Conventions for .NET / C# Projects Mar ...

  3. C# Coding & Naming Conventions

    Reference document https://msdn.microsoft.com/en-us/library/ff926074.aspx https://msdn.microsoft.com ...

  4. Spring mvc 4系列教程(二)——依赖管理(Dependency Management)和命名规范(Naming Conventions)

    依赖管理(Dependency Management)和命名规范(Naming Conventions) 依赖管理和依赖注入(dependency injection)是有区别的.为了将Spring的 ...

  5. JavaScript Patterns 2.10 Naming Conventions

    1. Capitalizing Constructors var adam = new Person(); 2. Separating Words camel case - type the word ...

  6. Naming conventions of python

    1.package name 全部小写字母,中间可以由点分隔开,作为命名空间,包名应该具有唯一性,推荐采用公司或组织域名的倒置,如com.apple.quicktime.v2 2.module nam ...

  7. Stackoverflow/dapper的Dapper-Extensions用法(一)

    Dapper-Extensions Dapper Extensions is a small library that complements Dapper by adding basic CRUD ...

  8. Objective-C文章中的生词

    Objective-C http://rypress.com/tutorials/objective-c/index C Basics    http://rypress.com/tutorials/ ...

  9. ExtJS笔记2 Class System

    For the first time in its history, Ext JS went through a huge refactoring from the ground up with th ...

随机推荐

  1. ubuntu普通用户无法使用usdo命令

    1.切换到root用户下,怎么切换就不用说了吧,不会的自己百度去. 2.添加sudo文件的写权限,命令是: chmod u+w /etc/sudoers 3.编辑sudoers文件 vi /etc/s ...

  2. python2.0_s12_day19_前端结合后端展示客户咨询纪录

    接下来就是将后台视图与前端页面结合起来了完成后台系统了.实现前端展示用户列表1.先在base.html代码中把模版中Dashboard下面的内容清空,如下: 具体删除哪些html代码,自己找吧.2.我 ...

  3. Android App签名打包 与 SDK开发文档

    Android App签名打包签名的意义1.为了保证每个程序开发者的合法权益2.放置部分人通过使用相同的Package Name来混淆替换已经安装的程序,从而出现一些恶意篡改3.保证我们每次发布的版本 ...

  4. Android 内存使用hprof文件打开方法

    http://blog.csdn.net/moruihong/article/details/7677128 与C++的内存不同,C++的内存泄露是由于分配了内存给某程序但是又没有回收造成的.Java ...

  5. executeQuery、executeUpdate 和 execute

    Statement 接口提供了三种执行 SQL 语句的方法:executeQuery.executeUpdate 和 execute.使用哪一个方法由 SQL 语句所产生的内容决定. 1. Resul ...

  6. 【BZOJ1453】[Wc]Dface双面棋盘 线段树+并查集

    [BZOJ1453][Wc]Dface双面棋盘 Description Input Output Sample Input Sample Output HINT 题解:话说看到题的第一反应其实是LCT ...

  7. oracle rank over partition by

    转自:https://www.cnblogs.com/wingsless/archive/2012/02/04/2338292.html rank() over(partition)的使用   有的时 ...

  8. ThinkPHP分类查询(获取当前分类的子分类,获取父分类,下一级分类)

    获取指定分类的所有子分类ID号 //获取指定分类的所有子分类ID号 function getAllChildcateIds($categoryID){ //初始化ID数组 $array[] = $ca ...

  9. Java多线程(4)----线程的四种状态

    与人有生老病死一样,线程也同样要经历开始(等待).运行.挂起和停止四种不同的状态.这四种状态都可以通过Thread类中的方法进行控制.下面给出了Thread类中和这四种状态相关的方法. 1 // 开始 ...

  10. Web安全开发建议

    版权声明:原创作品,如需转载,请与作者联系.否则将追究法律责任. Web安全问题,很多时候会被人所忽略,安全漏洞造成了很多不必要的维护和开发任务,产生的问题有时候更是致命的. 实际上,只要我们养成一些 ...