Ember.jsを学ぶのは難しいです。 そうではありませんが。 Ember.jsの概念を習得して理解することは困難です。 Ember.jsのトレーニングコースはこれらの言葉から始めるべきだと思います。
私は、Ruby on Railsで作業する開発者です（それ以前は.NETとPythonでプログラミングしていました）。 Ember.jsを機能させる魔法を理解するのは非常に困難でした。 時々、私はEmber.jsのパスに着手した（または着手しようとしている）他の初心者開発者と通信します-彼らの問題はすべて、このフレームワークの仕組みを理解していないために始まります。
はい、一方では、このフレームワークのすべての側面が詳細に説明されている公式ドキュメントがあります。 しかし、彼女には概念がありません。 初心者の開発者にとって、これらはランダムに散らばった情報の断片にすぎません。 たとえば、ドキュメントから、兵器庫のコントローラー、モデル、およびビュー（コントローラー、モデル、ビュー）にあることがわかります。 しかし、彼らが何に責任を持ち、どのように機能するかを知るために、最初の開発者は最初に数十回レーキを踏むことを提案されます。 さらに、Ember.jsのコントローラー、モデル、およびビューの負荷により、コンポーネント、テンプレート、ルーター、パス（コンポーネント、テンプレート、ルーター、ルート）などの雑多なオブジェクトの小隊全体が得られます。
しかし、まず最初に。 これがMVC（model-view-controller）フレームワークではないことを思い出して、Ember.jsのトレーニングを始めましょう。 忘れて。 はい、Ember.jsにはコントローラー、モデル、およびテンプレートビューがありますが、MVCフレームワークとの類似性はここで終わります。 Ember.jsは、ユーザーのブラウザーで実行されるアプリケーションを作成するためのフレームワークです。
次の図を見てください。Ember.jsで記述された標準アプリケーションでのリクエストのライフサイクルを詳細に説明しています。
アプリケーションの状態は、ブラウザのアドレスバーで指定したアドレスを使用して記述されます。 アドレスを使用して、アプリケーションの状態を保存したり、他のユーザーと状態を共有したりすることもできます。たとえば、同僚にバグトラッカーの特定のタスクへのリンクを送信できます（アプリケーションはタスクを表示します-これがその状態です）。
Ember.jsで記述されたアプリケーションが、アドレスバーのアドレスが変更されたという情報を受け取るとします。 ルーターはこの情報を傍受し、次に何をすべきかを判断しようとします。
UFO（少し叙情的な余談）： Ember.jsは2つの原則に基づいて機能します。 規則の規則。Ember.jsが期待されるオブジェクトを見つけられない場合、内部規則に基づいてオブジェクトを作成します。 ここでは、Ember.jsコードジェネレーターの動作に注目する価値があります。 おそらく、他のフレームワークのジェネレーターに精通しているでしょう。ジェネレーターはコードを使用してファイルを作成し、ディスクに保存します。 他のフレームワークとは異なり、Ember.jsのコードジェネレーターは、必要なときにのみオブジェクトを作成し、メモリに保持します。 オブジェクトが不要になった後、Ember.jsはそれを破棄します-この原則により、テンプレートコードの不要なサポートから解放されます。
続けましょう。 ユーザーが/ postsパスを要求したとしましょう。 このクエリに基づいて、ルーターは名前でチェーン内の次のオブジェクト-パスを見つけようとします。 おそらく既に推測したように、Ember.jsはPostsRouteと呼ばれるRouteタイプのオブジェクトを探します。 Ember.jsへのパスは、モデルをコントローラーに提供する役割を果たします。
Ember.jsは、PostModelというモデルを検索します。 このモデルは、ストレージとビジネスロジックに格納されているオブジェクトのデータ構造を記述します。 モデルは、Ember.jsがデータを含むオブジェクトを作成するクラスとして想像できます。 データウェアハウスは、モデルとサーバーの間に位置する抽象的な技術層にすぎません。 データは、Ember.jsがサーバーから取得した後、リポジトリに保存されます。
パスがデータを取得した後、それをコントローラーに渡します。 この場合のコントローラーは、PostsControllerと呼ばれます。 コントローラーとモデルの間には直接接続がないことに注意してください。 原則として、あなたがどのモデルを彼に与えても、彼らはお互いとコントローラーについて知りません。 コントローラーは単なるデータデコレーターです。ユーザーに提供する前にコントローラーを処理します。
次に、Ember.jsはコントローラーから処理されたデータを取得し、テンプレートに渡します。 しかし、コントローラーとテンプレートの間にある別のオブジェクト-ビューがあります。 ビューは、この場合はPostsViewと呼ばれ、このリクエストに使用するテンプレートをEmber.jsに指示します。 ルールに従って、Ember.jsは投稿と呼ばれるテンプレートを使用します。
フィードバック
ユーザーは、アプリケーションと対話できます（ボタンを突く、要素をドラッグアンドドロップする、他の方法で開発者を汚す）。 Ember.jsは、アプリケーションとの2種類のユーザーインタラクションを区別します。 最初は、いわゆる ネイティブブラウザイベント-クリック、ドラッグ、ドロップ、mouseEnter、mouserLeaveなど。 2番目の方法は、名前を持つイベントです。 2番目のタイプのイベントは、基本的に、このイベントが確実に存在する要素をクリックすることでトリガーされます。
違いは何ですか、あなたは尋ねますか？ さて、またはあなたが尋ねたかった。 最初のタイプのイベントは、ビューによって排他的に処理されます。 Ember.jsは、ユーザーがどのボタンをクリックしても、主な事実はクリックが発生したことです。 2番目のタイプは、特定の要素をクリックした後にのみ機能し、コントローラーによって処理されます。 コントローラーがイベントを処理できない場合、Ember.jsはパス（ルートオブジェクト）でイベントを処理しようとし、エラーを報告します。
パターン構造
初心者が他のオブジェクトをEmber.jsテンプレートに埋め込むことができ、サイクル全体が繰り返されることを発見した後、すべてがさらに混乱しているように見えます。 実際、心配することはありません。
現時点では、テンプレートにはコンテキスト（モデル、コントローラー、ビュー）があることが既にわかっています。
部分的なパターンから始めましょう。 これは、テンプレートに配置できる最も簡単なオブジェクトです（ただし、オブジェクトはおそらく部分的なテンプレートには大きすぎる名前です）。 Ember.jsは、指定されたテンプレートを取得して、親テンプレートに表示します。 これは親のコンテキストを使用します-つまり 部分的なテンプレートでは、モデル、コントローラー、および親ビューにアクセスできます。 簡単に言えば、すべてのイベントは親のビューとコントローラーによって処理されます。
ビューとコンポーネントは互いに非常に似ています（実際には、ビューはコンポーネントの親クラスです）。 ビューとコンポーネントの両方に独自のテンプレートがあります。 ビューとコンポーネントの背後には独自のオブジェクトがあります。 違いは2つの重要な点にあります。 まず、イベント処理-コンポーネント自体が登録済みイベントを処理し、ビューは単純にそれらを親テンプレートに渡し、それがコントローラーにそれらを順番に渡します。 第二に、環境-コンポーネントは完全に分離されており、あなたが彼に与えたオブジェクトでのみ動作できます。 ビューは、親テンプレートで使用可能なすべてのオブジェクトにアクセスできます。 親テンプレートのコンテキストに関しては、ビューはモデルとコントローラーにアクセスできますが、独自のビューがあります。 コンポーネントはより分離されており、何にもアクセスできません。
最後の要素はレンダーです。 これは、テンプレートで使用可能なすべてのオブジェクトの中で最も複雑です。 テンプレートでレンダーを呼び出すときは、テンプレートの名前とモデルの2つのパラメーターを指定する必要があります。 Ember.jsはテンプレートを見つけ、テンプレートの名前に基づいてコントローラーとビューを見つけます。 次に、モデルをコントローラーに渡し、コントローラーがモデルを処理した後、Ember.jsはそれをテンプレートに挿入します。 簡単に言えば、レンダリングの助けを借りて、完全に異なるコンテキストを持つ単一のページに、互いに独立した複数のテンプレートを収集できます。 レンダーは親テンプレートのコンテキストにアクセスできず（代わりに、レンダーには独自のコンテキストがあります）、すべてのイベントはビューとレンダーコントローラーを使用して処理されます。
Ember.jsの理論的な紹介をお楽しみください。 Ember.jsに関心がある場合は、公式ガイドを読んで、引き続きEmber.jsに慣れることができます。 また、私の本の助けを借りて知り合いを続けることもできます。この本の章の1つを翻訳したものです。