Ember.jsの使用を開始する

最近では、複雑なJavascriptアプリケーションがいたるところに見られます。 時間が経つにつれて、それらはより複雑になり、jQueryでコールバック関数のチェーンを単純に記述することはもはや受け入れられなくなりました。 Javascriptプログラマーは、普通の開発者が何十年も知っていることを徐々に学びます。 組織と効率は、開発において重要な役割を果たすことができます。 したがって、Backbone、Knockout、EmberなどのJavascript MVCフレームワークは、初心者、中級、および経験豊富な開発者の間の隙間を埋めるように見えました。 ニーズに応じて、さまざまな人に適したさまざまな機能を提供します。



私は自分をかなり優れた開発者と考えています...最高とはほど遠いですが、自分の開発で使用している既存のテクノロジーを使用して作業できます。 これらのフレームワークに従い、BackboneとEmberが私に近づきました。 Backboneで遊んだり、ビデオチュートリアルを購入したりしました。 彼は良いですが、私が彼のように考えることを強制するのはまだ難しいです。 数か月前にEmberについて聞いたところ、勢いが増しています。 それは私が必要とする多くの機能を提供し、私はそれが私に合うかを見ることにしました。 Emberは、私が非常に魅力的ないくつかの重要な機能を提供します。主な機能はデータバインディングです。 変数を作成するだけで、この変数の値が変更されると、この変数を監視するアプリケーションのすべての部分が更新されます。 これにより、たとえばチャットルームなどでアプリケーションが見つかります。



現時点では、Backboneと比較したEmberの主な欠点は、後者がGithubで多くのチュートリアル、記事、完成したプロジェクトを持っていることです。 Emberでは、ネットワーク上で、その内部のすべてをすぐに表示する資料はほとんどありませんが、非常に基本的なものは見逃します。 したがって、私の目標は、今すぐEmberの使用を開始するためのチュートリアルを作成することです。 まあ、とりわけ、私は自分の知識を統合するためにこの記事を書いています。



Ember.jsはMVC（Model-View-Controller）アーキテクチャ上に構築されており、コードを3つの部分に分割するだけです。

• M =モデル-配列のように見えます。 これは、アプリケーションで使用されるデータが保存される場所です。
• V =プレゼンテーションは、フォーム、リストなど、アプリケーションの視覚的な部分です。
• C =コントローラー-コントローラーを交通コントローラーと考えてください。 アプリケーションの他の部分間の相互作用を制御します。 ユーザーがボタンをクリックすると、コントローラーはどのビューをロードするかを決定し、それがデータを保存するためにどのモデルを使用するかを決定します。

さあ、始めましょうか？ 開始するには、 Ember.jsスターターキットをダウンロードしてください。 Webブラウザからアクセスできるディレクトリに解凍します。 お好みのテキストエディターでindex.html



とjs/app.js



開きます。 app.js



で次の行を追加します。

 Welcome = Ember.Application.create();
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

おめでとうございます！ Emberで最初のアプリを作成しました！ ブラウザでindex.html



を開き、新しいサイトに満足してください。 ああ待って、そこに何もない...これについてどう思いますか？ 見出し以外には何も表示されず、それで問題ありません。 起こったことは、Emberが、レッスンを通して使用するアプリケーションを作成したということだけです。 一部の開発者は、名前空間と呼ぶことを好みます。 これは、アプリケーションの他のすべての部分が、選択した名前で始まることを意味します。 これにより、変数名の競合を回避し、すべてを順序どおりに保つことができます。



ほとんどのjQuery開発者が非常に慣れているのは、古き良きdocument.ready



です。 Emberは同様の機能を提供し、 create



メソッドでオプションのオブジェクトを受け入れcreate



。 コードを追加し、ページをリロードすると、おめでとうございます。 頭をかわいがってください...あなたはそれに値します！

 Welcome = Ember.Application.create({ ready: function(){ alert('  !'); } });
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

次に行う必要があるのは、モデルを追加することです。 Emberの各アプリケーションには多くのモデルがあり、それぞれが一意のデータ型です。 一部のフレームワークでは、モデルはクラスとして表されます。 全体として、このオブジェクトの操作方法を示す構造にすぎません。 私のお気に入りの本のいくつかのモデルを作成しましょう。

 Welcome.Book = Ember.Object.extend({ title: null, author: null, genre: null });
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

次に必要なのはコントローラーです。 ところで、Emberのコントローラーは、アプリケーションの管理に加えて、モデルからビューにデータを転送します。 Emberのシンプルなコントローラーを次に示します。

 Welcome.booksController = Ember.ArrayController.create();
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

コントローラーを作成するようなものではありませんが、配列を含むArrayControllerを作成します。 これは、本に関する情報が保存される場所です。 彼女はそこにいます、あなたはただ彼女を見ません。 配列の内容を明示的に指定することも、たとえば入力することもできます。 これは、オプションのオブジェクトをcreate



メソッドに渡すことで実現create



。

 Welcome.booksController = Ember.ArrayController.create({ content: [] });
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

これでモデルとコントローラーができました。残っているのはビューを書くことだけです。 プレゼンテーションはアプリケーションの視覚的な部分だと言ったのを覚えていますか？ したがって、これはindex.html



ファイルに含まれます。 最初にプレゼンテーションを作成してから、それについて議論しましょう。 H1



タグの下に、次を追加します。

 <script type="text/x-handlebars"> {{#view Ember.Button target="Welcome.booksController" action="loadBooks"}} Load Books {{/view}} {{#collection contentBinding="Welcome.booksController" tagName="ul"}} <b>{{content.title}}</b> - {{content.author}}, <i>{{content.genre}}</i> {{/collection}} </script>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

Emberの優れた機能の1つは、組み込みのHandlebarsテンプレートエンジンが付属していることです。 基本的に、テンプレートはEmberの重要な魔法です。 通常、テンプレートでは、変数を何らかの文字列で囲みます。 ハンドルバーでは、これらは2つの中括弧です。



Emberは、AppleがMobile Meなどのオンラインアプリケーションのコアとして開発したSproutCoreライブラリとしての存在を開始しました。 SproutCoreには、Emberにはない一連のウィジェットも含まれていました。 Emberにはフォーム要素の送信のみが含まれます。フォーム要素は非常に動的である可能性があるためです。 テンプレートまたはプレゼンテーションの場合、Emberボタンを使用します。 これにより、彼は私たちのためにすべてのハードワークを行うことができます。 目的（この場合はbooksController



）とアクションが必要です。 したがって、誰かがボタンをクリックすると、EmberはloadBooks



オブジェクトのloadBooks



メソッドをloadBooks



ます。



2番目の部分はもう少し複雑ですが、きっとあなたはそれを理解するでしょう。 Emberでは、コレクションは単なるデータグループへのポインターであり、この場合は再びWelcome.booksController



です。 記事の冒頭で、関連データがEmberが私に興味を持った理由の1つであると書きました。 そして、ここですべての力を見ることができます。 Content



はbooksController



のcontent



変数を指しているだけですが、 Binding



は魔法の塵です。 ほとんどの属性の最後にBinding



を追加すると、双方向のバインドを行うことをEmberに伝えます。 一方の値を変更すると、他方が更新されます。 最後に、コレクションではベースタグを設定できます。この場合は、箇条書きリスト（ UL



タグ）です。



ちなみに、シンボル#



と/



は、これがビューの一部（ブロック）であることをHandlebarsに伝えます。



コレクション内には、テンプレートの「肉」があります。 テンプレート内でHTMLとタグを混在させる方法に注目してください。 便利ですね。 もう1つの微妙な点は、Emberがリストの開始タグまたは終了タグを明示的に指定する必要がないことです。 弾丸リストを使用していることを知っているため、彼はそれらを自動的に追加します。 アプリケーションを起動すると、友達を必要とする孤独なボタンが表示されます。 loadBooks



メソッドがないため、ボタンを押すと不満になります。 それを追加して、いくつかのデータをロードするのはどうですか？

 Welcome.booksController = Ember.ArrayController.create({ content: [], loadBooks: function(){ var self = this; $.getJSON('data/books.json', function(data) { data.forEach(function(item){ self.pushObject(Welcome.Book.create(item)); }); }); } });
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

モデルは任意のメソッドを含むことができると言ったことを覚えていますか？ Emberのすべてに、 ArrayController



含む任意のコードを含めることができます。 これで、ページをロードして「Load Books」 loadBooks



と、 loadBooks



メソッドが呼び出され、私のお気に入りの本がロードされます。 この単純な例は以上です。 私はあなたがそれを楽しんだことを望み、あなたはエンバーにチャンスを与えるでしょう。 サンプルソースコードはGithubからダウンロードできます 。



もう1分間待ちます。 あなたが私のようであれば、まだ質問があります。 たくさんの質問。 質問があり、答えを見つけるのに何時間もかかったため、この記事を書きました。 実際、この記事で取り上げた質問のほとんどに対する回答。 まだ質問がある場合は、 ここに書いてください 。 答えがわからない場合は、見つけて答えます。



Emberについて詳しく説明している2番目の記事を読むことをお勧めします。