Ember.js首页

Ember.js 基础

Ember.js 对象模型

Ember.js handlebars模板

Ember.js 路由

Ember.js 组件

Ember.js 控制器

Ember.js 模型

Ember.js 测试

Ember.js 入门

当前位置：免费教程 » JS/JS库/框架 » Ember.js

上一节:返回本课程首页

下一节:Ember.js 模板和应用程序

优化或报错有奖

现在，我们经常都可以看到复杂的JavaScript应用程序，由于这些应用程序变得越来越复杂，一长串的jQuery回调语句或者通过应用程序在各个状态执行不同的函数调用，这些做法都会变得无法再让人接受，这导致了JavaScript开发人员开始寻找一种组织和效率更优秀的开发方式。

实现组织和效率的其中一个最常用的架构模式，就是我们熟知的Model View Controller （MVC）模式，这种模式鼓励开发人员将其应用程序的不同部分分割为更易于管理的模块，我们不必使用一个函数直接调用数据库，通过创建了一个Model（模型或实体）来管理数据库；通过模板（Template）或视图（View）来简化显示代码；最后，通过使用控制器（Controller）来处理我们的应用程序的请求，MVC模式尽量降低每个模块之间的耦合度，提供程序的开发效率。

我们熟知的Javascript MVC框架有：Ember.js、Backbone.js、Knockout.js、Spine.js、Batman.js 和 Angular.js等。

emberjs0

Javascript MVC framework

通过上图，我们我们可以清楚地了解Javascript MVC框架之间的特性，复杂度和学习曲线的区别，从左到右我们了解到各个Javascript MVC框架是否支持数据绑定（Data Binding）、模板（Templating）和持久化等特性，从下到上MVC框架的复杂性递增，说实话我并没有去对比每个框架之间的优劣，如果大家有做过相关的对比或看过有关的文章也不吝赐教。

在接下来的内容中，我们将介绍Ember.js的使用。

Ember.js是一个JavaScript的MVC框架，它由Apple前雇员创建的SproutCore 2.0改名进化而来。

MVC定义

在介绍Ember之前，首先让我们回顾一下MVC模式，下面我们讲通过一个例子介绍MVC模式在程序设计中的作用，例如：

1. 用户执行一个操作，比如敲击键盘或单击鼠标按钮。

2. 控制器（Controller）接收输入并触发一个消息给模型（Model）。

3. 模型根据消息修改其内容（CRUD操作）。

4. 视图（View）监视模型中的变更，并将相应地更新呈现到用户界面中。

通过上面，我们了解到MVC中各个部件之间的作用和联系，在了解 MVC 模式的工作方式后，我们可以更加明确是否需要在我们的项目中引入Javascript的MVC框架。

在构建Ember应用程序时，我们会使用到六个主要部件：应用程序（Application）、模型（Model）、视图（View）、模板（Template）、路由（Routing）和控制器（Controller）。

接下来，我们将通过实现一个具体的程序来介绍Ember的使用。

设置Ember

首先，我们需要引用一系列Javascript库，所以我们在程序中添加js文件，并且把以下js文件保存到该文件夹中：

ember.js: ember 1.0.0-rc.3

ember-data.js: revision 2.12.0

handlebars.js: handlebars 1.2.rc.3

jquery.js: jQuery 1.9.1

app.js: 我们的应用程代码

上面，我们把一系列的js文件保存到了本地中，当然我们也可以通过使用CDN（内容分发网络）来获取相应Javascript库，接下来，让我们创建index.html页面。

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="description" content="" />
    <meta name="description" content="" />
    <meta name="keywords" content="" />
    <meta name="author" content="" />
    <title></title>
    <link rel="stylesheet" href="" type="text/css" />
    <link rel="stylesheet" href="" type="text/css" />
</head>
<body>
    <!-- Add Javascript libs Reference -->
    <script src="http://cdn.bootcss.com/jquery/1.9.1/jquery.min.js"></script>
    <script src="js/libs/handlebars-1.0.0-rc.3.js"></script>
    <script src="js/libs/ember-1.0.0-rc.2.js"></script>
    <script src="js/libs/ember-data.js"></script>
    <script src="js/app.js"></script>
</body>
</html>

现在，我们已经实现了第一个Ember程序，但是它还没有具体功能，接下来，我们将给程序添加功能。

转载本站内容时，请务必注明来自W3xue，违者必究。

上一节:返回本课程首页

下一节:Ember.js 模板和应用程序

优化或报错有奖

友情链接：直通硅谷　点职佳　北美留学生论坛