今日では、複雑なJavaScriptアプリケーションを目にすることが一般的ですが、これらのアプリケーションがますます複雑になるにつれて、jQueryコールバックステートメントの長い文字列や、アプリケーションのさまざまな状態を通して異なる関数呼び出しを実行することは受け入れられなくなる可能性があります。開発することになります。
これは、データベースを管理するモデルを作成することで、データベースを直接呼び出す関数を使用することなく、コードの表示を簡略化するテンプレートやビューを使用することで、アプリケーションの異なる部分をより管理しやすいモジュールに分割することを開発者に促します。***アプリケーションのリクエストを処理するためにコントローラを使用することで、MVCモデルは各モジュール間の結合を最小化し、プログラムの開発を効率化します。
図1 Javascript MVCフレームワーク
上記のグラフを通して、あなたは明らかに様々なJavascriptのMVCフレームワークのサポートデータバインディング、テンプレートと永続性と他の機能を理解するために左から右への違いの複雑さと学習曲線の間にJavascriptのMVCフレームワークの特性を理解することができ、下から上にインクリメンタルの複雑さのMVCフレームワークは、正直なところ、私はそれぞれのフレームワークの長所と短所の比較に行っていない場合は、もしあなたが持っている間もし関連する比較をされた方、またはそれに関する記事を読まれた方がいらっしゃいましたら、遠慮なくアドバイスください。
次回は、Ember.jsの使い方を紹介します。
1.1.2 テキスト
Ember.jsはJavaScriptのMVCフレームワークで、元Apple社員のSproutCore 2.0がevolutionに改名したもので、Emberは1.0.0-RC.3までリリースされています。
MVCの定義
Emberを紹介する上で、まずMVCパターンをおさらいし、次にプログラミングにおけるMVCパターンの役割を紹介するために、例を通して話をします：
1.ユーザーがキーボードを叩いたり、マウスのボタンをクリックするなどのアクションを実行すること。
2.コントローラは入力を受け取り、モデルへのメッセージをトリガーします。
3.モデルはメッセージに応答して内容を変更します。
4.ビューはモデルの変更を監視し、対応する更新をユーザーインターフェースに表示します。
以上を通して、MVCにおける様々なコンポーネントの役割と関連性を理解し、MVCパターンの仕組みを理解した上で、あなたのプロジェクトにJavascript用のMVCフレームワークを導入する必要があるかどうかをより明確にすることができます。
Emberアプリケーションを構築する際には、アプリケーション、モデル、ビュー、テンプレート、ルーティング、コントローラの6つの主要なコンポーネントを使用します。
次に、具体的なプログラムを実装することで、Emberの使い方を紹介します。
Emberのセットアップ
まず、参照する必要がある一連のJavascriptライブラリがあるので、アプリケーションにjsファイルを追加し、以下のjsファイルをそのフォルダに保存します：
ember-data.js: 1.0.0-RC.3
handlebars.js: handlebars 1.2.rc.3
jquery.js: jQuery 1.9.1
app.js：アプリケーションコード
上記のように、ローカルに保存された一連のjsファイルは、もちろん、あなたはまた、適切なJavascriptライブラリを取得するためにCDNを使用することができ、次に、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="//ajax.googleapis.com/ajax/libs/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のプログラムが実装されていますが、まだ具体的な機能はありません。
#p#
テンプレート
Ember.jsは、handlebarsテンプレートエンジンを使用して、使用の初めに、まず第一に、handlebars.jsの最初の簡単な紹介をしてみましょう。あなたがjQueryテンプレートや他のスクリプトテンプレートを使用したことがある場合は、handlebars.jsの使用の習得のために、あまりにも難しいことではありません、あなたは本当にそれの使用を心配する必要はない場合は、handlebars.jsの使用は非常に簡単ですので。handlebars.jsの使用も非常に簡単です。
式は {{}} に含まれ、Handlebars テンプレートは、text/x-handlebars タイプのスクリプトをページに追加することで、html ページにインラインで読み込むか、handlebars または hbs をサフィックスとするファイルに保存し、Ember.js を介してページに読み込むかの 2 つの方法でページに読み込むことができます。タグをページに追加するか、handlebars または hbs をサフィックスとするファイルに保存し、Ember.js.
簡単にするために、Handlebarsスクリプトをindex.htmlページに直接埋め込みます。
<script type="text/x-handlebars" data-template-name="application">
<h1>Employee System</h1>
{{outlet}}
</script>
上記で、テンプレートアプリケーションが定義され、Handlebars式{{outlet}}が追加されています。これは、ここのコンテンツが動的にページに読み込まれるべきであり、インデックスページがブラウザで開かれたときにテンプレート内の情報が表示されないことをEmberに伝えるプレースホルダとして機能します。
アプリケーション
これはまだEmberアプリケーションが定義されていないためで、EmberアプリケーションにはEmberアプリケーションのインスタンスが必要です！
まず、Emberアプリケーションのインスタンスを作成します：
// Creates an application instance.
App = Ember.Application.create();
上記で、AppというEmberアプリケーションを定義しました。 もちろん、アプリケーションの名前は何でも良いのですが、1つ注意しなければならないのは、Emberでは変数名が大文字で始まる必要があるということです。
次に、ブラウザでページを開き、テンプレートの読み込み情報を表示します。
図2 インデックスページ
Emberはどのテンプレートを読み込む必要があるのか、どうやって知っているのですか？より重要な点は、Emberは読み込むべきテンプレートの名前を知らされず、テンプレートアプリケーションをページに直接埋め込むだけだということです。
実際、ここには「暗黙のルール」があります: ApplicationViewを定義しない場合、Emberは自動的にApplicationViewを生成し、デフォルトでapplicationというテンプレートを読み込みます。application1というテンプレートをリネームした場合、デフォルトのApplicationViewは読み込むテンプレートを見つけられません。
もちろん、以下のように実装されたApplicationViewを定義することで、読み込む必要のあるテンプレート名を指定することもできます。
// Defines an application view, then loading
// relative templates.
App.ApplicationView = Ember.View.extend({
templateName: 'application1'
});
さて、もう一つの疑問は、{{outlet}}式のコンテンツはどのようにロードされて表示されるべきかということです。
ルーティング
outlet}}の内容はルーティングの選択に基づいて動的に取得されるテンプレートの内容なので、Emberアプリケーションのルーティングが最初に導入され、アプリケーションの状態とユーザーがアプリケーションをナビゲートするために必要なリソースを管理するのに役立ちます; アプリケーションが起動すると、ルーティングはテンプレートの表示、データの読み込み、アプリケーションの状態の管理を担当します。
次に、以下のようにURLメソッド定義を指定して、アプリケーションのルーティングを定義します：
// Defines a goal routing home and
// the detail information of employee routing.
App.Router.map(function() {
this.route("home", {path: "/"});
this.route("employee", {path: "/employee/:employee_id"});
});
上では、2つのルートが定義されています。アプリケーションのグローバルルートである home と employee はインデックスページでロードされ、home ルートのテンプレート、データ、アプリケーションの状態にアクセスします。
次に、ホームテンプレートを定義します：
<script type="text/x-handlebars" data-template-name="home">
<h3>Employee Information</h3>
<ul>
{{#each item in employeeInfo}}
<li>item</li>
{{each}}
</ul>
</script>
上記では、ホームテンプレートの定義と、employeeInfoオブジェクトの要素に繰り返しアクセスするために各式を使用することで、employeeInfoオブジェクトをどこで取得するかという問題があります。
先ほど、ControllerはModelからデータを取得し、テンプレートから読み込んで表示する役割があると書きましたが、データを取得するControllerを明示的に定義することができ、定義しない場合はEmberが自動的にHomeControllerを生成します。
// Defines a custom controll.
App.HomeController = Ember.Controller.extend({
employeeInfo: ['Jackson Huang', 'Ada Li', 'JK Rush']
});
#p#
上記で HomeController をカスタマイズし、 employeeInfo 配列を初期化しました。
図3 インデックスページ
さて、もう一つ疑問があります。例えば、プログラムにアクセスするリソースがたくさんある場合、コントローラを明示的に定義することは可能でしょうか？
実は、ルートコントローラを定義することで、コントローラの自動選択を実現することもでき、Emberはコードを書くことなく、対応するControllerを自動生成してくれるのですが、その具体的な実装は以下の通りです：
// Defines a routing handler.
App.HomeRoute = Ember.Route.extend({
model: function(){
return ['Jackson Huang', 'Ada Li', 'JK Rush'];
},
setupController: function(controller, model){
controller.set('content', model)
}
});
ルートコントローラApp.HomeRouteを定義し、メソッドsetupControllerをオーバーライドすると、ルートハンドラがマッチしたコントローラを***パラメータ、つまりHomeControllerとして受け取り、モデルパラメータをHomeControllerに渡します。HomeControllerは対応するデータを取得し、テンプレートにロードして表示することができます。
上記で、データをページに読み込むことに成功しましたが、データはコントローラに直接ハードコードされており、データを取得するためのモデルは定義されていません。
次のステップでは、Fixturesからデータを取得する実装を行います。この実装にはember-data.jsライブラリが必要で、以下のように実装します。
// Customs a store.
App.Store = DS.Store.extend({
// Notify the version of ember data api used.
revision: 12,
// Used FixtureAdapter.
adapter: 'DS.FixtureAdapter'
});
上記で、app.jsにDS.StoreのサブクラスApp.Storeを定義し、アプリケーションで使用するEmber data apiのバージョンを12と宣言すると、apiのバージョンが更新されたり、使用しているバージョンが古すぎる場合、ember-data.jsは対応するエラーメッセージを返します。
例えば、現在のember-data.jsのバージョンが12で、app.jsの定義がapiのバージョン1を使用している場合、コンソールに以下のようなエラーメッセージが表示されます。
図4 ember-data.jsのバージョン情報
モデリング
モデルはアプリケーションデータを表現するためのオブジェクトで、単純な配列であったり、RESTful API経由で動的に取得されたデータであったりします。ember-data.jsはアプリケーションモデルのロード、マッピング、更新のためのAPIを提供します。
ember-data.jsはアプリケーションごとにストレージを提供し、ロードされたModelを保持したり、まだロードされていないModelを取得したりします。
以前は、アプリケーションのAppを定義し、今、従業員の情報であるプログラムにデータを提供する必要があるので、プログラムの従業員のモデルを作成するには、次のステップは、モデルの定義を実装することです。
// Defines a employee model.
App.Employee = DS.Model.extend({
name: DS.attr('string'),
department: DS.attr('string'),
title: DS.attr('string')
})
上記では、DS.Modelを継承し、name、department、titleの3つのフィールドを持つEmployeeモデルが定義されています。
次に、App.Employee.FIXTURES.FIXTURESを定義して、サーバーサイドからのデータ取得をシミュレートします。
// Defines a JSON array.
App.Employee.FIXTURES = [
{
id: 1,
name: 'Jackson Huang',
department: 'IT',
title: 'programmer'
},
{
id: 2,
name: 'Ada Chen',
department: 'purchasing',
title: 'buyer'
},
{
id: 3,
name: 'JK Rush',
department: 'IT',
title: 'programmer'
},
{
id: 4,
name: 'Lucy Liu',
department: 'IT',
title: 'tester'
},
{
id: 5,
name: 'Julia Liu',
department: 'HR',
title: 'Manager'
}
];
#p#
App.Employee.FIXTURES は、従業員に関する基本情報を含む JSON 配列を定義します。
次に、ホームを修正し、従業員テンプレートを追加します：
<!-- Home temp START -->
<script type="text/x-handlebars" data-template-name="home">
<h3>
Employee Information</h3>
<ul>
{{#each item in content}}
<li>{{item}}</li>
{{/each}}
</ul>
<h3>
Employee</h3>
<ul>
{{#each employee in employees}} {{#linkTo "employee" employee}}
<p>
{{employee.name}}
</p>
{{/linkTo}} {{/each}}
</ul>
</script>
<!-- Home temp END -->
<!-- Employee temp START -->
<script type="text/x-handlebars" data-template-name="employee">
<div>
<h3>
Name: {{name}}</h3>
<p>
Department: {{department}}
</p>
<p>
Title: {{title}}
</p>
{{#linkTo home class='btn btn-primary'}}Back{{/linkTo}}
</div>
</script>
<!-- Employee temp END -->
ホーム・テンプレートで、each 式を追加して従業員要素に繰り返しアクセスし、linkTo を介して従業員ルートを選択します。
図5 プログラムページ
さて、従業員プログラムの基本的な機能の完了は、次の従業員をチェックするための情報をユーザーに提供します。
1.1.3 まとめ
EmberはJavascriptのMVCフレームワークなので、初心者の方は自動生成やデフォルトのルールに惑わされがちです。公式ドキュメントを熟読することを強くお勧めします。
