ember.js 101 入门教程第一课

时间 2019-11-18

标签 ember.js ember 入门教程一课栏目 JavaScript 繁體版

原文原文链接

须要声明的是：目前ember.js已经发展到v2.50+ 的版本了，v1.0与新版本已经有很大不一样，若是您是为了了解ember.js的一些基础知识，这个入门的东东会有些帮助，若是您正在开发一些web应用，就没什么借鉴和参考价值了，建议直接看官方文档，不要被教程误导了。javascript

Ember.js 的MVC框架是与其余的JavaScript框架相比，具备更完整的MVC特性以及建立下一代web应用所需的不少特性，就像做者说的是个雄心勃勃的框架。
学习以前咱们须要在脑子里创建些概念。一个ember.js的应用须要建立一个命名空间（也就是建立一个Application对象实例），空间里会包含路由、数据模型、控制器、视图、模版，基本上每一个路由要有提供数据的模型，对应的控制器，对应的视图和模版—一套组件，也就是说应用程序空间里会有不少套组件构成，每套组件包含了路由、模型、控制器、视图、模版，而这些ember.js 都有默认建立，咱们要作的是改写这些默认组件。把技术语言翻译成大白话和中文其实挺有难度的。。。html

介绍数据绑定的模版

一、构建依赖

首先要作的事情是在文件head标签部分声明ember依赖的两个小伙伴 jQuery 和 Handlebars。能够经过ember.js工具完成，也能够手工本身构建完成。java

主要的代码：jquery

<head>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.0.0-rc.3/handlebars.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/ember.js/1.0.0-rc.1/ember.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>

二、Hello word 第一个应用

如何构建一个Hello word 的ember应用程序，而且运行它呢？你所须要的只是一个Templates 和一行JavaScript 代码。web

Templates：ajax

<h1>Hello, World!</h1>

JavaScript：bash

var App = Ember.Application.create()

后台的ember会建立一个控制器和根路径，后面咱们会详细讲解。框架

三、显示数据到模版

好了，再进一步，如何经过模版显示数据？函数

如今咱们已经有了一个路由（网址）和一个模版，咱们要把数据绑定到模版。
首先，我已经获得了App这个应用程序对象实例，我能够定义一个name属性，而且给它赋值。工具

var App = Ember.Application.create();
App.name = "Ember App";

而后更新模版来显示它。

<h1>{{App.name}}</h1>

四、绑定数据到模版

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);

<h1>{{App.name}}</h1>
<h2>{{App.secondsViewed}}</h2>

本文完。

完整代码以下：