Ember.js学习笔记

最近公司需要用到Ember.js做管理后台，所以学习一番。

一、环境搭建

开发Ember程序需要搭建Ember环境（windows）1、nodejs 2、安装npm 3、git  4、bower

1、安装nodejs

nodejs的安装需要到https://nodejs.org 去下载安装包，安装过程中自动添加path的系统环境变量，变量的值就是你的安装路径，这一步自动完成，不需要自己添加。输入"node -v"

查看版本

2、npm安装

由于新版的NodeJS已经集成了npm，所以在上一步npm也一并安装好了。以管理员身份运行cmd,输入 “npm -v”

3、git安装

git在Windows下需要下载安装包。最后输入“git --version”查看版本

 4、bower 是Bower是Web的包管理器。Bower可以方便的管理应用的依赖，包括Ember和Ember Data。

npm install -g bower

到此为止，emberjs的环境搭建就完成了。

二、emberjs例子

1、通过ember new myemberjs创建一个名字为myemberjs的项目

2、通过bower install 命令添加依赖

3、通过ember s 命令运行程序

4、访问：http://localhost:4200

5、创建路由about

ember generate route about

6、创建模型about

ember g model about

7、在/app/routes/about.js添加代码

import Ember from 'ember';
//app/routes/about.js
export default Ember.Route.extend({
		 model: function() {
      var blogPost = this.store.createRecord('about', {
            title: 'title1',  //  属性默认为string类型，可以不指定
            intro: "intro1",
            author: 'author1'
        });
        // 直接返回一个model
        return blogPost;
    },
   setupController: function(controller, model){    
    controller.set('content', model)

  }
});

8、在/app/templates/about.hbs修改为

<h1>{{model.title}}</h1>  
<h2>{{model.author}}</h2>

<div class="intro">  
    {{model.intro}}
</div>

<hr>

9、修改app/models/about.js

import DS from 'ember-data';

export default DS.Model.extend({
  	title: DS.attr(),
    intro: DS.attr(),
    author: DS.attr() 
});

10、访问：http://localhost:4200/about

这里我举了个小例子将数据通过model的数据在页面中渲染。以后会进行深入了解。