-

本篇之前的6篇文章都是第一章的内容,这一章节主要介绍了Ember的对象模型。其中最重要的是计算属性和枚举这2章,非常之重要,一定要好好掌握!

下一章节是第二章模板,Ember应用使用的模板库是handlebar点我查看更多有关此模板的介绍),这个模板库功能强大,有丰富的标签,包括判断标签ifif else,以及遍历标签each等等。

另外,从下一章开始,我们不再自己手动搭建Ember项目,也不用手动引入Ember库文件,而是使用官方提供的一个非常棒的构建工具——Ember CLI,要使用这个构建工具首先安装并配置。下面两个地址是介绍安装与配置的(推荐第一个):

  1. http://www.ember-cli.com/user-guide/
  2. https://guides.emberjs.com/v2.4.0/getting-started/

Ember CLI是一个非常重要的构建工具,它可以为开发者创建文件并初始化部分固定的代码。它还可以运行、打包、测试Ember应用。

下面使用这个工具创建一个新的Ember项目chapter2_tempalte

  1. 新建项目命令: ember new chapter2_tempalte
  2. 进入项目目录并启动服务器: cd chapter2_template
    ember server
  3. 运行项目,浏览器打开这个链接:http://localhost:4200/,如果你能看到如下信息说明安装成功了。

run proj

如果项目创建成功你可以继续往下看,如果项目创建不成功请重试,因为后面的代码都基于这个项目来演示的!!!对于创建项目后得到的每个文件和目录请你看官网文档,上面会有非常详细的说明。为了方便懒人在此就简单介绍其中几个很重要的文件和目录:

目录 说明
app 项目的主要代码都是放在这个目录下
app/controllers 存放C(MVC)层(controller)的代码文件
app/helpers 存放自定义的helper代码文件
app/models 存放M(MVC)层(model)代码文件
app/routes 存放项目路由设置代码文件
app/templates 存放项目模板代码文件
bower_components 存放使用bower命令安装的第三方插件库
bower.json 保存使用bower命令安装的第三方库的配置
package.json 保存使用npm命令安装的第三方库的配置
node_modules 存放使用npm命令安装的第三方插件库
ember-cli-build.js 设置构建规范,引入第三方库
dist 存放编译打包后的项目文件,可以直接复制到服务器中运行

上述这些文件或者目录是后面开发过程经常会用到,相对其他目录和文件来说这些目录和文件是很重要的,只要你是使用ember new appName命令生成的项目都会包括上述这些目录或者文件。其中最重要的就是app目录下的文件、目录了,从app里面的目录结果你就可以很清楚的看到这是个MVC框架的项目。Ember之所以能找到controller对应的template也是根据目录和文件的名称找到的,Ember是有自己的一套命名规则的,如果你想了解更多有关信息请移步folder-layout

搭好环境之后开始我们的Ember之旅吧!!!
博文完整代码放在Github(博文经过多次修改,博文上的代码与github代码可能又出入,不过影响不大!),如果你觉得博文对你有点用,请在github项目上给我点个star吧。您的肯定对我来说是最大的动力!!