EmberJS 入门实践

发布于 2020-02-28 18:00:22 字数 5832 浏览 1595 评论 0

首先让我们用Ember 官方网站上的一句话来介绍Ember:

A framework for creating ambitious web applications

基本配置

由于Ember的官方指南主要关注概念性的东西，而没有太注重实用性，所以，要亲自动手配置Ember可能不那么容易。在开始编写我们的代码之前，我们就先从头开始配置一下环境：(本文所有操作都基于linux)

首先创建项目文件：

mkdir hello-ember
cd hello-ember

接下来我们创建项目的文件结构，这里，我们需要一个文件夹以及一个HTML文档

mkdir js
touch index.html

接下来，我们得在项目中加入Ember必需的3个库：

jQuery
Handlerbars
Ember

对于jQuery，我们可以使用Google提供的CDN jQuery库，而对于其他两项，分别可以在 Ember 和 Handlebars 下载.

以上三者都应该放在上面创建的js文件夹里。

上面准备好了之后，我们还需要创建一个入口程序：

touch js/app.js

然后，把下面的代码加入到index.html文件中去(要注意你的Handlebars及Ember的命名是否与下面代码的链接名一致)：

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Hello Ember</title>
  </head>
  <body>
    <div>
      <h1>Hello Ember</h1>
    </div>
  </body>
  <script
src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
  <script type="text/javascript" src="js/handlebars.js"></script>
  <script type="text/javascript" src="js/ember.js"></script>
  <script type="text/javascript" src="js/app.js"></script>
</html>

现在我们就可以来看一下执行效果了，利用python架设简单的服务器：

python -m SimpleHTTPServer

现在访问本机的8000端口即可看到效果。

Step 1: 应用程序视图

首先，我们得先创建一个Ember应用，在js/app.js中添加以下代码：

var HelloEmber = Ember.Application.create();

接下来，对于一个完整正确的Ember应用来说，我们还需要添加：

视图
控制器

最简单的视图就是全局的应用程序视图，在index.html中加入以下代码：

<body>
  <div>
    <script type="text/x-handlebars" data-template-name="application">

    </script>
  </div>
</body>

script标签指定了Handlebars模板，用data-template-name标识视图的名称。关于 Handlebars 的知识可以参见http://handlebarsjs.com/

视图创建完毕，接下来开始创建控制器：

Step 2: 控制器

在Ember中，控制器的作用主要是：将数据传递给模板用于灵活显示。
下面，我们创建一个控制器，在app.js中添加如下代码：

var HelloEmber = Ember.Application.create();
HelloEmber.ApplicationController = Ember.Controller.extend({
  greeting : "Good Morning Starshine!",
  happyThought : "The Earth Says Hello!"
});

这里这样写可能有点不妥，但是仍然可以执行，我们不妨先这样写，后面再做修改。
接下来，为了可以显示我们的数据，我们还需更新index.html文件：

<body>
  <div>
    <script type="text/x-handlebars" data-template-name="application">
      <h1>{{greeting}}</h1>
      <h3>
        {{happyThought}}
      </h3>
    </script>
  </div>
</body>

好了，现在可以刷新页面去见证奇迹了！

Step 3: 命名惯例

在Ember中：命名即是一切。有关命名惯例的内容可以参加：英文链接中文链接

下面，我们来看看Ember中的命名，先来改进一下上面的ApplicationController。我们删除ApplicationController，创建一个新的IndexController,现在app.js中的内容如下所示：

var HelloEmber = Ember.Application.create();
HelloEmber.IndexController = Ember.Controller.extend({
  greeting : "Good Morning Starshine!",
  happyThought : "The Earth Says Hello!"
});

再修改视图index.html，如下所示：

<body>
  <div>
    <script type="text/x-handlebars" data-template-name="application">
      {{outlet}}
    </script>
    <script type="text/x-handlebars" data-template-name="index">
      <h1>{{greeting}}</h1>
      <h3>
        {{happyThought}}
      </h3>
    </script>
  </div>
</body>

现在刷新页面，效果应该跟修改之前一样，但是，这与前面有什么不同呢？

再一次申明：命名惯例。虽然，我们的代码中没有显示定义ApplicationController，但是Ember会自动创建它。其实这类似与C++的构造函数，在以前的例子中，我们只是重载了构造函数(这里指ApplicationController)罢了。

IndexController也是一样的道理。你定义，或者不定义它，它都存在，不离，不弃。只是，在这个例子中，我们重载了它。

模型和路由

接下来，我们在讨论一下Ember的其他部分.

在app.js中，定义一个模型，如下所示：

HelloEmber.Greeting = Ember.Object.extend({
  greeting : "Good Morning Starshine!",
  happyThought : "The Earth Says Hello!"
});

然后，再定义一个路由，在Ember中，路由的作用是使控制器可以找到某个模型，现在，app.js的文件内容如下所示：

//our app
var HelloEmber = Ember.Application.create({});

//our model
HelloEmber.Greeting = Ember.Object.extend({
  greeting : "Good Morning Starshine!",
  happyThought : "The Earth Says Hello!"
});

//our route
HelloEmber.IndexRoute = Ember.Route.extend({
  model : function(){
    return HelloEmber.Greeting.create();
  }
});

这些代码就够了，不信？刷新一下页面试试？

或许你会感觉到奇怪，我们甚至没有控制器啊！！？？仔细想想，对了：命名惯例。Ember会为我们自动创建一个控制器IndexController。只要我们按照命名惯例来编写代码，IndexController就会自动与IndexRoute关联。控制器会接收路由中所指定模型的数据，并将其提供给视图，以供显示。

这就是上面代码起作用的原因，最后一遍：都是命名惯例惹得祸。

后记

对于我来说，Ember是全新的东西，甚至可以说整个web领域对我一点都不熟悉。在过去的两三个周内，我开始编写一些简单的web代码，同时学习Ember。可以说，在昨天下午，我感觉自己对Ember有点感觉了，特别是对命名惯例有感觉了，其实，这种感觉源自我犯的一些错误，当把这些错误解决了，所有的东西好像一下子就清楚了。所以说，失败是成功之母，这话没有假。我想，对于所有东西，其实，前期的一些错误或失败可以让我们更快的达到我们的最终目标。

说了一些废话，这篇文章可能距离真正的在项目中使用Ember还有一定差距，但是对于理解Ember以及其中的MVC架构应该是很有益的，如果英语好的话，建议直接阅读英文文章。

分享到QQ

分享到微博