コアポイント

• Ember CLIは、Ember向けに構(gòu)築されたコマンドラインツールであり、ジェネレーター、コンプレッサー、CSSプリプロセッサコンパイラ、自動(dòng)リロード、ES6モジュールローダーなどのさまざまな機(jī)能を組み合わせています。新しいエンバープロジェクトを設(shè)定するために、GruntやGulpなどのツールの代替品として使用できます。
• Emberは、コンベンションが構(gòu)成よりも優(yōu)れているという概念に従います。つまり、開(kāi)発プロセスを簡(jiǎn)素化する多くのデフォルト設(shè)定があります。重要な要素には、ルーティング、コントローラー、テンプレート、コンポーネント、およびエンバーデータが含まれます。
• このチュートリアルは、Ember CLIを使用してシンプルな連絡(luò)先マネージャーアプリケーションを構(gòu)築する方法に関する段階的なガイドを提供します。新しいEmberプロジェクトの作成、固定データの設(shè)定、ユーザーモデルの生成とルーティング、ユーザーテンプレートの作成、表示および編集の追加機(jī)能をカバーしています。
• Emberは、大規(guī)模なWebアプリケーションを構(gòu)築するための強(qiáng)力なJavaScriptフレームワークです。 Ember CLIを使用すると、依存関係の管理、タスクの自動(dòng)化、ベストプラクティスの実行を容易にする標(biāo)準(zhǔn)化された開(kāi)発環(huán)境を提供します。

エンバーは長(zhǎng)年にわたって多くの変更を受けてきました。最大の変更は、Ember用に構(gòu)築されたコマンドラインツールであるEmber CLIの導(dǎo)入です。発電機(jī)、コンプレッサー、CSSプリプロセッサコンパイラ、自動(dòng)リロード、ES6モジュールローダーなどのさまざまな機(jī)能を組み合わせています。このコマンドラインツールは、GruntやGulpなどのツールのセットアップに費(fèi)やす時(shí)間を短縮するのに役立ちます。これは間違いなく、新しいEmberプロジェクトのこれらのツールに代わる良い選択肢です。この記事では、Ember CLIを使用してSimple Contact Managerアプリケーションを構(gòu)築する方法を?qū)Wびます。このチュートリアルは、Ember CLIに付屬していないため、SitePointに投稿したEmberに関する他の記事とはわずかに異なります。ただし、これらの概念のほとんどは引き続き適用されるため、チェックアウトして學(xué)習(xí)を続けることをお?jiǎng)幛幛筏蓼埂￥长斡浭陇瓮耆圣畅`ドは、GitHubで見(jiàn)つけることができます。

Ember Cli Ember CLIをインストールするには、最初にいくつかの依存関係をインストールする必要があります。最初のものはnode.jsです。少なくともバージョン0.12.xが必要です。次に、Bowerをインストールする必要があります。これは、次のコマンドを?qū)g行することで実行できます。

次に、Ember CLIをインストールするには、次のコマンドを?qū)g行します。

npm install -g bower

新しいEmberプロジェクトを作成する方法

素晴らしい操作を開(kāi)始する前に、ContactManagerと呼ばれる新しいプロジェクトフォルダーを作成するには、端末を開(kāi)き、次のコマンドを?qū)g行する必要があります：

npm install -g ember-cli

2番目のステップ、ディレクトリに移動(dòng)して、次のコマンドを使用してすべてのNPMとBowerの依存関係をインストールします。

この時(shí)點(diǎn)で、次のコマンドを?qū)g行して、內(nèi)蔵エンバーサーバーを開(kāi)始します。

URL LocalHost：4200で新しいアプリケーションにアクセスできるようになりました。これは、ローカルコンピューターで実行されているEmberアプリケーションのデフォルトポートですが、好きなように変更できます。指示されたすべての手順に従うと、ブラウザに「Emberへようこそ」と書かれたタイトルが表示されるようになりました。

ember new contactmanager

エンバーの慣習(xí)と構(gòu)造

アプリケーションに飛び込む前に、エンバーの慣習(xí)のいくつかをレビューしましょう。

ルーターとルーター

ルーティングは、Emberアプリケーションのエントリポイントです。ルーターの定義は、App/router.jsファイルで使用されます。アプリケーションのさまざまな部分にアクセスできます。たとえば、アプリケーションでユーザーを管理する必要があると判斷した場(chǎng)合は、ユーザールートを定義する必要があります。これは、次の構(gòu)文を使用して行うことができます

npm install -g bower

これにより、次のURLが作成されます

/users/

• /users/index/
• /users/loading/
慣習(xí)により、ルートを定義すると、エンバーはルート、コントローラー、テンプレートなどの他の関連タイプを見(jiàn)つけることを期待しています。これらのタイプを明示的に作成するか、Emberが私たちのためにそれらを作成できるようにすることを決定できます。多くのアプリケーションでは、おそらく自分で作成する必要がありますが、それはあなた次第です。ルーターとルートを區(qū)別することが重要であることを忘れないでください。上記で作成したURL構(gòu)造は、ルーターを使用して行われます。これらは、アプリケーションでこれらのURLを使用する意図を示しているだけです。実際のルートは作成していませんが、それらのルート用のURLだけを作成しました。ルートを作成するには、ルートフォルダーでこのプロセスに従う必要があります?；靵yしている場(chǎng)合は、心配しないでください。このトピックをこの記事の後半でもっと詳しく見(jiàn)てみましょう。

コントローラー

コントローラーは、アプリ/コントローラーフォルダーにあるView Stateを保存するために使用されるタイプです。彼らはルーティングと組み合わせて動(dòng)作します。この場(chǎng)合、上記のURLは /user /に対応し、 /users /users /。また、ここでは、自分で定義するかどうかを自由に選択できます。コントローラーは、ビュー操作（クリック、ホーバーなど）のイベントハンドラーも定義します。

テンプレート

テンプレートはEmberの表現(xiàn)部分です。純粋なHTMLにコンパイルするハンドルバーと呼ばれるテンプレート言語(yǔ)で書きます。テンプレートは、アプリ/テンプレートフォルダーにあります。

コンポーネント

コンポーネントは、小さな自己完結(jié)型の機(jī)能ブロックです。それらを表現(xiàn)と特徴の組み合わせと考えることができますが、それらは再利用可能で、メンテナンスが簡(jiǎn)単です。

ember-data

これは、Ember Coreを補(bǔ)完し、データモデルを管理するためのフロントエンドORMとして機(jī)能するEmber Coreチームが維持するライブラリです。 Ember-Dataを使用するため、私がこれまで使用したことがなく、この記事の範(fàn)囲外である他の選択肢があります。

app

私たちが構(gòu)築する連絡(luò)先管理アプリケーションには、ユーザーのリストとその利用可能な連絡(luò)先情報(bào)が含まれます。アプリケーションを使用すると、ユーザーを作成、編集、削除、表示できます。アプリケーションを簡(jiǎn)潔かつ明確にするために、Ember CLIに付屬の固定アダプターを使用します。これは、ページが更新されたときにデータが持続しないことを除いて、バックエンドとして機(jī)能します。まず、作成していない場(chǎng)合は、Ember New ContactManagerを使用して新しいEmberプロジェクトを作成します。

ユーザーモデルを生成

プロジェクトフォルダーに移動(dòng)し、次のコマンドを使用してユーザーモデルを生成します。

これにより、アプリ/モデルでuser.jsという名前のファイルが作成され、次のコンテンツがあります。

npm install -g bower

エクスポートステートメントが次のようになるように必要な変更を加えてください。

npm install -g ember-cli

これは、ユーザーモデルが持つプロパティを定義します。

ユーザールートを生成します

さあ、次の行をrouter.jsファイルに追加して、利用可能なURLをいくつか提供します。

3つの新しいURLがあります。 1つはユーザーをリストすること、もう1つは個(gè)々のユーザーを表示することであり、最後はユーザー情報(bào)を編集することです。次に、次のコマンドを使用してユーザールートを作成しましょう。

ember new contactmanager

このルートは、ユーザーリストを取得するために使用されます。次のコードスニペットを使用してコンテンツを変更します：

cd contactmanager
npm install
bower install

固定データを設(shè)定して、ユーザーテンプレートを生成

この時(shí)點(diǎn)で、アプリケーションに一時(shí)的なデータを追加しましょう。これを行うには、次のコマンドを?qū)g行します

ember serve

これにより、アプリ/アダプター/フォルダーにapplication.jsという名前のファイルが生成されます。デフォルトでは、EmberはRestadapterを使用してモデルを照會(huì)します。このアダプターは、EmberクライアントアプリケーションにJSONデータを提供するバックエンドシステムがあることを前提としています。バックエンドはないので、この場(chǎng)合、代わりに固定データを使用する必要があります。したがって、次のようにアダプターコードを更新します。

>次をユーザーモデルに追加して、いくつかのフィクスチャーを作成します。

Router.map(function() {
  this.resource('users', function() {});
});

url localhost：4200/usersに移動(dòng)すると、古い挨拶メッセージのみが表示され、追加したユーザーのピン留めデータは表示されません。ユーザーデータを表示するには、次のコマンドを使用してユーザーのテンプレートを作成する必要があります。

ember generate model user

これにより、アプリ/テンプレート/フォルダーにusers.hbsという名前のファイルが作成されます。このファイルを開(kāi)き、次のようにその內(nèi)容を更新します。

ユーザーのリストが表示されます。それぞれの編集テキストが隣にあります。固定データには1人のユーザーのみがいるため、1人のユーザーのみが表示されます。必要に応じて、ユーザーオブジェクトをユーザーフィクスチャに追加できます。各オブジェクトに一意のIDがあることを確認(rèn)してください。

import DS from 'ember-data';

export default DS.Model.extend({
});

個(gè)々のユーザーを表示

export default DS.Model.extend({
  firstName: DS.attr(),
  lastName: DS.attr(),
  addressLine: DS.attr(),
  postCode: DS.attr(),
  country: DS.attr()
});

ユーザーをリストしたので、ユーザーの完全な情報(bào)を表示する方法を見(jiàn)てみましょう。初め。リンクを使用して各ユーザー名の橫にある「編集」テキストを囲むことにより、ユーザーテンプレートのコードを変更します。次に、「編集」を次のように変更します

次に、次のコマンドを使用してユーザーコントローラーを生成しましょう。

Router.map(function() {
  this.resource('users', function() {
    this.route('show',{path: '/:user_id'});
    this.route('edit',{path: '/:user_id/edit'});
  });
});

內(nèi)部（ユーザーコントローラー）、コンテンツを次のように変更します。

終了後、次のコマンドを使用して、ユーザーを編集するためのテンプレートを生成します。

現(xiàn)在、作成されたテンプレート（App/Templates/Users/show.hbs）は空です。それを開(kāi)いて、次のコードを追加します：

ember generate route users

これを行うと、クリックする各ユーザーの完全な情報(bào)を見(jiàn)ることができるはずです。

シングルユーザーの編集

単一のユーザーを編集する場(chǎng)合は、簡(jiǎn)単な手順に従う必要があります。まず、リンクを使用して各ユーザー名の橫にある「編集」テキストを囲むことにより、ユーザー編集ルートへのリンク。次に、「編集」を次のように変更します

npm install -g bower

次に、次のコマンドを使用してユーザーコントローラーを生成しましょう。

內(nèi)部（ユーザーコントローラー）、コンテンツを次のように変更します。

npm install -g ember-cli

終了後、次のコマンドを使用して、ユーザーを編集するためのテンプレートを生成します。

ember new contactmanager

新しいテンプレートアプリ/テンプレート/ユーザー/編集で、次のコードを貼り付けます。

このコードは、フォームを送信するときにコントローラーのSaveUSER（）関數(shù)を呼び出します。この関數(shù)は、編集中のユーザーに合格し、変更された情報(bào)を保存します。この変更を使用すると、ユーザーの編集リンクをクリックすると、ユーザーの詳細(xì)を編集できます。 [保存]ボタンをクリックすると、それらを保存できます。その後、ユーザーリストにリダイレクトされます。ロングライブ！これで、簡(jiǎn)単な連絡(luò)先リストマネージャーができました。ページがリフレッシュされたときにデータを持続するために、実際のバックエンドに接続することにより、完全なアプリケーションに変換できます。また、不要なユーザーをいつでも削除できるように、アプリに削除機(jī)能を追加することもお?jiǎng)幛幛筏蓼埂?

cd contactmanager
npm install
bower install

結(jié)論

ember

ember serve

http://www.miracleart.cn/link/0e0f9e664029e8912996d65c1cf09761

は、大規(guī)模なWebアプリケーションを構(gòu)築するためのフレームワークです。コンベンションは構(gòu)成よりも優(yōu)れているという考えがあります。つまり、いくつかの一般的な決定に基づいており、開(kāi)発プロセスを容易にする多くのデフォルト（規(guī)則）があります。これにより、開(kāi)発プロセス中に多くの些細(xì)な決定を下す必要はありません。このチュートリアルを読んで、プロジェクトでこのような強(qiáng)力でシンプルなJavaScriptフレームワークをどのように使用するかについての新しいことを?qū)Wんでいただければ幸いです。以下のコメントであなたの考えを教えてください。 GitHubでアプリケーションのコードを見(jiàn)つけることができます。

EmberとEmber Cliの始めることについてのよくある質(zhì)問(wèn)エンバーとエンバーCLIの違いは何ですか？ Emberは、Webアプリケーションを構(gòu)築するためのJavaScriptフレームワークであり、Ember CLIは、Emberアプリケーションの作成、開(kāi)発、構(gòu)築に役立つコマンドラインツールです。 Ember CLIは、依存関係の管理、タスクの自動(dòng)化、ベストプラクティスの実行を容易にする標(biāo)準(zhǔn)化された開(kāi)発環(huán)境を提供します。

Ember CLIをインストールする方法は？ Ember CLIをインストールするには、システムにnode.jsとnpmをインストールする必要があります。これらの前提條件をインストールした後、端末に次のコマンドを使用してEmber CLIをインストールできます：

。

「サーブコマンドを使用するには、Ember CLIプロジェクトの中にいる必要があります」というエラーメッセージが表示されます。これはどういう意味ですか？

このエラーは、Ember CLIプロジェクトディレクトリの外側(cè)で

コマンドを?qū)g行しようとすると発生します。この問(wèn)題を解決するには、

コマンドを使用してプロジェクトのルートディレクトリに移動(dòng)してから

を?qū)g行します。

コマンドを使用して、アプリケーションの名前を使用して、新しいEmberアプリケーションを作成できます。たとえば、ember newは「My-App」と呼ばれる新しいEmberアプリケーションを作成します。 ember new my-app

どのような基本的なEmber CLIコマンドを知っておくべきですか？

知っておくべきいくつかの基本的なEmber CLIコマンドには、

（新しいアプリケーションの作成）、ember new（開(kāi)発サーバーを開(kāi)始）、ember serve（新しいファイルを生成）、ember generate（アプリケーションの構(gòu)築展開(kāi)のためのプログラム）。 ember build

コマンドを使用して、オプションを「生産」に設(shè)定して、生産のアプリケーションを構(gòu)築できます。コマンドは次のようになります：

。 ember build --environment Ember CLIを使用してEmberアプリケーションで新しいファイルを生成する方法は？ ember build --environment production

コマンドを使用して、ファイルタイプとその名前を使用して、Emberアプリケーションで新しいファイルを生成できます。たとえば、

は「About」という新しいルートを生成します。

ember generateember generate route aboutコマンドを使用して開(kāi)発サーバーを起動(dòng)できます。これにより、サーバーが起動(dòng)し、http：// localhost：4200でアプリケーションにアクセスできます。

エンバーCLIを更新する方法は？

コマンドを使用して古いバージョンをアンインストールしてから、コマンドember serveを使用して新しいバージョンをインストールしてEmber CLIを更新できます。

ember-cliファイルの目的は何ですか？

npm uninstall -g ember-cliファイルは、Ember CLIの構(gòu)成ファイルです。 Ember CLIプロジェクトの動(dòng)作をカスタマイズできます。たとえば、開(kāi)発サーバーのデフォルトポートを指定し、特定の機(jī)能を有効または無(wú)効にするなどします。 npm install -g ember-cli

以上がEmberとEmber CLIを始めましょうの詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國(guó)語(yǔ) Web サイトの他の関連記事を參照してください。