需要声明的是:目前ember.js已经发展到v2.50+ 的版本了,v1.0与新版本已经有很大不同,如果您是为了了解ember.js的一些基础知识,这个入门的东东会有些帮助,如果您正在开发一些web应用,就没什么借鉴和参考价值了,建议直接看官方文档,不要被教程误导了。
Ember.js 的MVC框架是与其他的JavaScript框架相比,具有更完整的MVC特性以及创建下一代web应用所需的很多特性,就像作者说的是个雄心勃勃的框架。
学习之前我们需要在脑子里建立些概念。一个ember.js的应用需要创建一个命名空间(也就是创建一个Application对象实例),空间里会包含路由、数据模型、控制器、视图、模版,基本上每个路由要有提供数据的模型,对应的控制器,对应的视图和模版—一套组件,也就是说应用程序空间里会有很多套组件构成,每套组件包含了路由、模型、控制器、视图、模版,而这些ember.js 都有默认创建,我们要做的是改写这些默认组件。把技术语言翻译成大白话和中文其实挺有难度的。。。
介绍数据绑定的模版
1、构建依赖
首先要做的事情是在文件head标签部分声明ember依赖的两个小伙伴 jQuery 和 Handlebars。可以通过ember.js工具完成,也可以手工自己构建完成。
主要的代码:
JS Bin
2、Hello word 第一个应用
如何构建一个Hello word 的ember应用程序,并且运行它呢?你所需要的只是一个Templates 和一行JavaScript 代码。
Templates:
Hello, World!
JavaScript:
var App = Ember.Application.create()
后台的ember会创建一个控制器和根路径,后面我们会详细讲解。
3、显示数据到模版
好了,再进一步,如何通过模版显示数据?
现在我们已经有了一个路由(网址)和一个模版,我们要把数据绑定到模版。
首先,我已经得到了App这个应用程序对象实例,我可以定义一个name属性,并且给它赋值。
var App = Ember.Application.create();
App.name = "Ember App";
然后更新模版来显示它。
{{App.name}}
4、绑定数据到模版
ember中 任何时候你在模板中显示数据,它会自动绑定,该模板将保持的实时更新。
- 我们定义一个新的name属性,并初始化设置secondsViewed属性值 为 0,定义一个函数setInterval 用来使属性值secondsViewed 自动 +1,最大值为1000。
- ember中get是读取某个值,set是设置某个值,刚开始接触ember 会有些不大习惯。
- 在用户界面上 放上 secondsViewed 属性。
var App = Ember.Application.create({
name: "Timer",
secondsViewed: 0
});
setInterval(function() {
var viewed = App.get('secondsViewed');
App.set('secondsViewed', viewed + 1);
}, 1000);
{{App.name}}
{{App.secondsViewed}}
本文完。
完整代码如下:
JS Bin