ember.js 101 入门教程 第一课

需要声明的是：目前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工具完成，也可以手工自己构建完成。

主要的代码：

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}}

本文完。

完整代码如下：

转载于:https://www.cnblogs.com/cloudhan/p/5405231.html