×

EmberJS 教程

EmberJS 概述EmberJS 环境配置EmberJS 应用EmberJS 对象模型EmberJS 模板EmberJS 路由器EmberJS 组件EmberJS 模型EmberJS 视图EmberJS 控制器EmberJS 测试EmberJS 指定查询参数

Ember 对象模型

Ember 类的定义 初始化 继承Ember 类的扩展Ember 计算属性Ember 观察者Ember 数据绑定Ember 枚举Ember 第一章对象模型小结

Ember handlebars模板

Ember handlebars基础Ember handlebars条件表达式Ember handlebars遍历标签Ember handlebars显示对象键Ember handlebars属性绑定Ember {{link-to}} 助手Ember 路由 模板执行渲染顺序Ember {{action}} 助手Ember 表单元素Ember 调试助手Ember 工具类的助手Ember 第二章模板小结

Ember 路由

Ember 路由定义Ember 指定与路由关联的模型Ember 模板渲染Ember 路由重定向Ember 路由终止挑战和激活Ember loading error子路由Ember 查询参数Ember 异步路由

Ember 组件

Ember 组件定义Ember 属性传递Ember 包裹内容自定义包裹组件的HTML标签Ember 处理事件Ember action触发变化

Ember 控制器

Ember 控制器Ember 管理控制器的依赖关系

Ember 模型

Ember model简介Ember 定义模型Ember 记录查询Ember 新建、更新、删除记录Ember 设置记录到StoreEmber model的关联关系处理Ember 元数据Ember 自定义适配器Ember 自定义序列号器

Ember 测试

Ember 测试简介Ember 验收测试Ember 单元测试

Ember 第一章对象模型小结


本篇之前的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之旅吧!!!


分类导航

关注微信下载离线手册

bootwiki移动版 bootwiki
(群号:472910771)