Ember.js の世界を満喫しましょう

利用可能な JavaScript ライブラリは多数あり、そのほとんどは、一般的な Web サイトで必要とされる従来の DOM 中心の対話を提供するのに非常に優れています。しかし、シングルページ アプリケーション用の管理しやすいコード ベースを構築する場合、問題を解決するにはまったく新しいフレームワーク セットが必要になります。

古いことわざにあるように、「仕事に最適なツールを使用する」。

jQuery のような従来のライブラリがデスクトップのようなエクスペリエンスを構築できないというわけではありません。単にそのユースケースではなく、データ バインディング、イベント ルーティング、状態管理などの機能が欠けているだけです。もちろん、これらの機能の一部を実装するために多数のプラグインを組み合わせることもできますが、私の意見では、これらの特定の問題を解決するために特別にゼロから構築されたフレームワークから始める方が合理的です。古いことわざにあるように、「仕事に最適なツールを使用しましょう。」

私は最近、Ember.js チームと面談しました。私の動機は、私が「新しく注目されているもの」と呼ぶもの、つまり Ember.js について学びたいということでした。

Ember は、jQuery が開発者を迅速に起動して稼働させる方法を彷彿とさせる方法で、上で説明した要件を満たしています。チームは、大規模なアプリケーションの構築から得た長年の専門知識と知識を活用して、モデル/ビュー/コントローラー ベースのアプリケーションの設計と構築に固有の複雑さの多くを抽象化するための措置を意図的に講じました。

私がやりたいのは、フレームワークの概念を段階的に紹介する複数部構成の記事シリーズを通じて、皆さんが Ember.js を使いこなすのに役立つことです。通常の紹介 (これがこの記事です) から始めて、徐々に完全なアプリケーションを構築していきます。何よりも、これは私が学んだ概念を強化し、おそらく新しいテクニックを学ぶのにも役立ちます。 Ember.js チームにこの資料の正確性をレビューしてもらい、価値のあるものを提供できるように最善を尽くします。

先に進む前に、次の点に注意してください: Ember.js は多くの魔法をもたらします。時々、コードを見て「え？ どうやってそんなことするの？」と思うかもしれません。私もそこに行って、いくつかのことを抽出してみますが、Ember フレームワーク コードの内部については掘り下げません。代わりに、そのツールと API を活用してアプリケーションを構築する方法について説明します。

それでは、始めましょう。

---

核となるアイデア

Ember.js は、従来の Web サイトを構築するためのフレームワークではありません。

最初に覚えておくべきことは、Ember.js は従来の Web サイトを構築するためのフレームワークではないということです。 jQuery や MooTools などのライブラリはこれに最適です。 Ember.js を検討している場合、デスクトップのようなエクスペリエンス、特にスケーラブルなエクスペリエンスを構築したいと考えていると考えられます。実際、このフレームワークのキャッチフレーズは「野心的な Web アプリケーションを開発するためのフレームワーク」であり、これがお父さんの JavaScript ライブラリではないことは明らかです。

Ember は MVC パターンを利用して適切なコード管理と組織化を促進していると前に述べました。 MVC ベースの開発を行ったことがない場合は、ぜひ読んでください。 Nettuts にこのトピックに関する素晴らしい記事があります。これらの概念に精通している人にとっては、安心できるはずです。私がよく耳にするのは、開発者が慣れ親しんでいるコード編成パターンを維持しながら、多くの面倒な作業を Ember が代わりに行ってくれるため、Backbone から Ember.js への移行は実際には簡単だということです。 p>

Ember はクライアント側のテンプレートにも依存しています...多くのテンプレートを使用しています。これは、動的な HTML ベースのテンプレートを作成できる式を提供する Handlebars テンプレート ライブラリを使用します。 Ember 開発者は、これらの埋め込み可能な式にデータをバインドし、アプリケーションの表示を動的に変更できます。たとえば、一連の人々を取得し、それらを順序なしリストに表示するテンプレートを作成できます。 リーリー 「#each」式はループ命令として使用され、「people」配列の各要素を列挙し、「{{name}}」式を実際の値に置き換えることに注意してください。二重括弧は、ハンドルバーが式を識別するために使用するマーカーであることに注意してください。これは小さな例です。詳細については後ほど説明します。

Handlebars は非常に強力なクライアント側のテンプレート エンジンです。利用可能なオプションを完全に理解するには、Ember ガイドだけでなく、Handlebars Web サイト自体もチェックすることをお勧めします。たくさん使うことになるでしょう。

Ember をセットアップする

---

Ember.js は他のライブラリに依存しているため、jQuery と Handlebars のコピーを入手する必要があります。でも待って、jQuery と Ember は異なる空間で機能すると言いましたよね?ええ、はい、私はそうしましたが、ここで重要なのは、Ember チームは車輪の再発明をしないことに取り組んでいるということです。彼らは jQuery が最も得意とすること、つまり DOM を操作するために jQuery を選択しました。 jQuery はこの点で非常に優れているため、これは良いことです。だからこそ、彼らは、Ember のコア チーム メンバーである Yehuda Katz によって書かれた素晴らしいテンプレート ライブラリである Handlebars を選択したのです。

必要なファイルを入手する最も簡単な方法は、Ember.js Github リポジトリにアクセスし、スターター キットをダウンロードすることです。始めるためのサンプルを次に示します。執筆時点では、次の内容が含まれています:

• 人类 1.0 RC1
• 处理栏 1.0 RC3
• jQuery 1.9.1

还有一个基本的 html 模板，其编码包含所有关联的库（jQuery、Ember 等），以及 Handlebars 模板和“app.js”的示例，其中包含用于启动基本的 Ember 应用程序。

<script src="js/libs/jquery-1.9.1.js"></script>
<script src="js/libs/handlebars-1.0.0-rc.3.js"></script>
<script src="js/libs/ember-1.0.0-rc.1.js"></script>
<script src="js/app.js"></script>

请注意，app.js 不是框架的一部分。这是一个普通的 ole JavaScript 文件；您可以将其命名为任何您想要的名称。而且，虽然我们将在本教程系列中使用它，但以后您可能最终会将 JavaScript 拆分为多个文件，就像处理任何其他网站或应用程序一样。此外，Ember 并不期望您的框架文件有特定的目录结构。

当您查看入门工具包代码时，它可能看起来像典型的网站代码。从某些方面来说，你是对的！不过，一旦我们开始组织事情，您就会看到构建 Ember 应用程序有何不同。

---

余烬之地的布局

在开始编写代码之前，了解 Ember.js 的工作原理以及了解构成 Ember 应用程序的移动部件非常重要。让我们看一下这些部分以及它们之间的关系。

---

模板

模板是定义用户界面的关键部分。正如我之前提到的，Handlebars 是 Ember 中使用的客户端库，在为应用程序创建 UI 时广泛使用该库提供的表达式。这是一个简单的例子：

<script type="text/x-handlebars">
     <h2><strong>{{firstName}} {{lastName}}</strong></h2>
</script>

请注意，表达式会混合到 HTML 标记中，并通过 Ember 动态更改页面上显示的内容。在这种情况下，{{firstName}} 和 {{lastName}} 占位符将被从应用检索的数据替换。

Handlebars 通过灵活的 API 提供强大的功能。了解它提供的功能对您来说非常重要。

---

路由

应用程序的路由器有助于管理应用程序的状态。

应用程序的路由器有助于管理应用程序的状态以及用户导航应用程序时所需的资源。这可能包括从模型请求数据、将控制器连接到视图或显示模板等任务。

您可以通过为应用程序中的特定位置创建一条路线来实现此目的。路由指定应用程序的各个部分以及与其关联的 URL。 URL 是 Ember 用于了解需要向用户呈现哪种应用程序状态的关键标识符。

App.Router.map( function() {
   this.route( 'about' ); // Takes us to "/about"
});

路由的行为（例如：从模型请求数据）通过 Ember 路由对象的实例进行管理，并在用户导航到特定 URL 时触发。一个示例是从模型请求数据，如下所示：

App.EmployeesRoute = Ember.Route.extend({
   model: function() {
       return App.Employee.find();
   }
});

在本例中，当用户导航到应用程序的“/employees”部分时，路由会向模型请求所有员工的列表。

---

模型

数据的对象表示。

模型是应用程序将使用的数据的对象表示。它可以是一个简单的数组或通过 Ajax 请求从 RESTful JSON API 动态检索的数据。 Ember 数据库提供了用于在应用程序中加载、映射和更新数据到模型的 API。

---

控制器

控制器通常用于存储和表示模型数据和属性。它们就像代理一样，使您可以访问模型的属性并允许模板访问它们以动态渲染显示。这就是模板始终连接到控制器的原因。

要记住的主要事情是，当模型检索数据时，您将使用控制器以编程方式将该数据公开给应用程序的不同部分。虽然模型和控制器看起来紧密耦合，但事实上，模型本身并不知道稍后将使用它们的控制器。

您还可以存储需要保留但不需要保存到服务器的其他应用程序属性。

---

观看次数

Ember.js 中的视图旨在管理围绕用户交互的事件，并将其转换为在应用程序中有意义的事件。因此，如果用户单击按钮来删除员工，则视图负责解释本机浏览器单击事件并在应用程序当前状态的上下文中对其进行适当处理。

---

命名约定

Ember.js 帮助最大程度地减少所需代码量并在幕后为您处理事务的方法之一是通过命名约定。定义和命名路由（和资源）的方式会影响控制器、模型、视图和模板的命名。例如，如果我创建一条名为“employees”的路线：

App.Router.map( function() {
   this.resource( 'employees' );
});

然后我会命名我的组件，如下所示：

• ルーティング オブジェクト: App.EmployeesRoute
• コントローラー: App.EmployeesController
• モデル: App.従業員
• 表示: App.EmployeesView
• テンプレート: 従業員

この命名規則を使用すると、2 つの目的があります。まず、類似したコンポーネント間の意味的な関係がわかります。次に、Ember は、存在しない可能性がある必要なオブジェクト (ルート オブジェクトやコントローラーなど) を自動的に作成し、アプリケーションで使用できるようにそれらを接続できます。これが先ほどお話しした「魔法」です。実際、これはまさに、Application オブジェクトをインスタンス化するときに Ember がグローバル アプリケーション レベルで行うことです。

var App = Ember.Application.create();

この 1 行により、アプリケーションのルーター、コントローラー、ビュー、およびテンプレートへのデフォルトの参照が作成されます。

• ルーティング オブジェクト: App.ApplicationRoute
• コントローラー: App.ApplicationController
• ビュー: App.ApplicationView
• テンプレート:アプリケーション

上で作成した「employees」ルートに戻ります。ユーザーがアプリケーションで「/employees」に移動すると、Ember は次のオブジェクトを探します。

• App.EmployeesRoute
• App.EmployeesController
• 従業員テンプレート

それらが見つからない場合は、それぞれのインスタンスが作成されますが、データの導出元のモデルやデータの表示に使用するテンプレートが指定されていないため、何も表示されません。このため、命名規則が非常に重要です。これにより、手動で接続することなく、特定のルートに関連するタスクを処理する方法を Ember に知らせることができます。

最初の例では、モデルを定義するために単数形の名前「Employee」を使用したことに注意してください。これは意図的なものです。 「従業員」という名前の性質上、ゼロから多数の従業員で作業する可能性があるため、1 人の従業員またはすべての従業員を返す柔軟性を備えたモデルを構築することが重要です。モデル自体は後でモデルを使用するコントローラーを認識していないため、モデルの単一の命名規則は Ember の要件ではありません。したがって、柔軟に名前を付けることができますが、一貫性を保つために、この規則に従うとコードの管理が容易になります。

さらに、ルートを定義するために

resource() メソッドを使用することにしました。この場合、特定の従業員情報の詳細ページを管理するためにネストされたルートを使用する可能性が高いためです。ネストについては、このシリーズの後半で説明します。

重要な点は、一貫した命名スキームを使用することで、Ember は多くのコードを通じて関係を明示的に定義することなく、これらのコンポーネントをバインドするフックを簡単に管理できるということです。

Ember の命名規則の詳細は、プロジェクトの Web サイト (

必読) でご覧いただけます。

---

次のステップ: アプリケーションの構築

このシリーズの次のパートでは、アプリケーションの基盤を作成するコードを詳しく掘り下げていきます。

Ember の中核となる概念を確認し、フレームワークの重要な高レベルの側面について説明しました。このシリーズの次のパートでは、アプリケーションの基盤を作成するコードを詳しく掘り下げていきます。それまでの間、式の構文を理解するためにハンドルバーのドキュメントを参照し始めることを再度お勧めします。また、本当に Ember を使い始めるのが待ちきれない場合は、Tuts Premium に注目してください。これは、Ember ベースのアプリケーションの構築を段階的に説明する完全なコースを間もなく提供する予定です。

この記事の冒頭で述べたように、Ember.js コア チームのリーダーである Yehuda Katz と Tom Dale は、このコンテンツの正確性をレビューし、高く評価しました。チームエンバーが承認されました！また後で！

以上がEmber.js の世界を満喫しましょうの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。