web-dev-qa-db-ja.com

Ember.jsアプリケーションを設計する方法

Ember JSがアプローチ（および到達！）バージョン1.0.0になったときの進化に対応するのは困難でした。チュートリアルとドキュメントが行き交い、最高のことについて多くの混乱を招きました。元の開発者の実践と意図。

私の質問は正確に：Ember JSのベストプラクティスは何ですか？Ember JSの使用方法を示す更新されたチュートリアルまたは作業サンプルはありますか？コードサンプルは素晴らしいでしょう！

みんな、特にEmber JS devs！

ember.js
104
Craig Labenz

Ember.jsの新規およびベテラン開発者の両方が活用すべき重要なプロジェクトがあります。

Ember-CLI

コマンドラインではある程度の快適さを必要としますが、コミュニティが推奨する最新のEmberプロジェクトを数秒で生成できます。

Mike Grassottiの答えのように、Ember.jsプロジェクトを難しい方法でセットアップすることは有益ですが、実稼働コードではそうするべきではありません。特に、Ember-CLIのような強力で使いやすいプロジェクトがある場合、Yehudaが承認した ハッピーパス を表示します。

16
Matt Jensen

Mike Grassottiの最小実行可能Ember.jsクイックスタートガイド

このクイックスタートガイドでは、数分でzeroからわずかに多いになります。完了したら、ember.jsが実際に機能することをある程度確信し、さらに多くのことを学ぶのに十分な興味があることを願うはずです。

警告：このガイドを試してから、ember-sucksが「jQueryまたはFortranでより良いクイックスタートガイドを書くことができる」などと考えているだけではありません。 emberまたは何でも、このガイドはハローワールドに過ぎません。

ステップ0-jsFiddleをチェックアウトする

this jsFiddle には、この回答のすべてのコードが含まれています

ステップ1-ember.jsおよびその他の必要なライブラリを含める

Ember.jsにはjQueryとHandlebarの両方が必要です。これらのライブラリがember.jsの前にロードされていることを確認してください。

_<script type='text/javascript' src='http://code.jquery.com/jquery-1.9.1.js'></script>
<script type='text/javascript' src="http://cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.0.0-rc.3/handlebars.js"></script>
<script type='text/javascript' src="http://cdnjs.cloudflare.com/ajax/libs/ember.js/1.0.0-rc.1/ember.js"></script>
_

ステップ2-1つ以上のハンドルバーテンプレートを使用して、アプリケーションのユーザーインターフェイスを記述します

デフォルトではemberは1つ以上のhandlbarsテンプレートのコンテンツを使用してhtmlページの本文を置き換えます。これらのテンプレートはいつかスプロケットまたは多分grunt.jsによってアセンブルされた別個の.hbsファイルになります。すべてを1つのファイルに保持し、スクリプトタグを使用します。

最初に、単一のapplicationテンプレートを追加しましょう：

_<script type="text/x-handlebars" data-template-name="application">
  <div class="container">
    <h1>Ember.js is easy?<small> Minimum Viable Ember.js QuickStart Guide</small></h1>
    <p>{{message}}</p>
  </div>
</script>
_

ステップ3-emberアプリケーションを初期化する

App = Ember.Application.create({});で別のスクリプトブロックを追加して、ember.jsをロードし、アプリケーションを初期化します。

_<script type='text/javascript'>
  App = Ember.Application.create({});
</script>
_

基本的なemberアプリケーションを作成するために必要なのはそれだけですが、あまり面白くありません。

ステップ4：コントローラーを追加する

Emberは、コントローラーのコンテキストで各ハンドルバーテンプレートを評価します。したがって、applicationテンプレートには、一致するApplicationControllerがあります。 Ember createsは、定義しない場合は自動的に作成されますが、ここではメッセージプロパティを追加するようにカスタマイズしてみましょう。

_<script type='text/javascript'>
App.ApplicationController = Ember.Controller.extend({
    message: 'This is the application template' 
});
</script>
_

ステップ5：ルートとその他のコントローラーとテンプレートを定義する

Emberルーターを使用すると、テンプレート/コントローラーをアプリケーションに簡単に組み合わせることができます。

_<script type='text/javascript'>
  App.Router.map(function() {
    this.route("index", { path: "/" });
    this.route("list", { path: "/list" });
  });

  App.IndexController = Ember.Controller.extend({
    message: 'Hello! See how index.hbs is evaluated in the context of IndexController' 
  });

  App.ListRoute = Ember.Route.extend({
    setupController: function(controller) {
      controller.set('content', ['angular.js', 'backbone.js', 'ember.js']);
    }
  });

</script>
_

これを機能させるために、_{{outlet}}_ヘルパーを追加してアプリケーションテンプレートを変更します。 Ember routerはユーザーのルートに応じて適切なテンプレートをアウトレットにレンダリングします。また、_{{linkTo}}_ヘルパーを使用してナビゲーションリンクを追加します。

_    <script type="text/x-handlebars" data-template-name="application">
      <div class="container">
          <h1>Ember.js is easy?<small> Minimum Viable Ember.js QuickStart Guide</small></h1>
        <p>{{message}}</p>
        <div class="row">
          {{#linkTo index class="span3 btn btn-large btn-block"}}Home{{/linkTo}}
          {{#linkTo list class="span3 btn btn-large btn-block"}}List{{/linkTo}}
        </div>
        {{outlet}}
      </div>
    </script>

    <script type="text/x-handlebars" data-template-name="list">
      <h3 class="demo-panel-title">This is the list template</h3>
      <ul>
      {{#each item in content}}
          <li>{{item}}</li>
      {{/each}}
       </ul>
    </script>

    <script type="text/x-handlebars" data-template-name="index">
      <h3 class="demo-panel-title">This is the index template</h3>
      <p>{{message}}</p>
    </script>
_

できた！

このアプリケーションの実例が利用可能です here 。

this jsFiddle を、独自のemberアプリの開始点として使用できます

次のステップ...

  • メンバーガイド を読む
  • 多分 Peepcode スクリーンキャストを買う
  • ここでスタックオーバーフローまたはember IRCで質問してください。

参考のため、私の元の答え：

私の質問は、Ember.jsの専門家、そして確かにそれぞれのチュートリアル作成者に対するものです。あるチュートリアルのデザインパターンをいつ使用し、他のチュートリアルのデザインパターンを使用するのですか

これらの2つのチュートリアルは、作成時のベストプラクティスを表しています。確かに、それぞれから学ぶことができるものがありますが、ember.jsは非常に高速に動いているため、どちらも時代遅れになる運命にあります。 2つのうち、トレックの方がはるかに最新です。

それぞれのどのコンポーネントが個人的な好みであり、アプリが成熟するにつれてどのコンポーネントが不可欠であると証明されますか？新しいemberアプリケーションを開発している場合、Code Labのアプローチに従うことはお勧めしません。それは古すぎて役に立たないでしょう。

Code Labの設計では、EmberはカスタムJSの100％であっても）アプリケーション内に存在しているように見えますが、TrekのアプリケーションはEmber内により多く存在するようです。

あなたのコメントはバングオンです。 CodeLabはコアemberコンポーネントを利用し、グローバルスコープからそれらにアクセスします。これが書かれたとき（9か月前）これはかなり一般的でしたが、今日はemberアプリケーションは、トレックがやっていることにずっと近いです。

とはいえ、トレックのチュートリアルでさえ古くなっています。必要なコンポーネントApplicationViewおよびApplicationControllerは、フレームワーク自体によって生成されるようになりました。

最新のリソースは、 http://emberjs.com/guides/ で公開されている一連のガイドです。これらは過去数週間にわたってゼロから書かれており、最新の（pre -release）emberのバージョン。

また、ここでtrekのwipプロジェクトをチェックアウトします。 https://github.com/trek/ember-todos-with-build-tools-tests-and-other-modern-conveniences

[〜＃〜] edit [〜＃〜]：

@ sly7_7：ember-data https://github.com/dgeb/ember_data_example を使用して、他の例も示します

110
Mike Grassotti

@tomdaleによる30分間の新鮮なスクリーンキャストがあります： https://www.youtube.com/watch?v=Ga99hMi7wfY

10
sly7_7

Yeoman とそれに付随するember generator。追加のボーナスとして、ビューテンプレートを複数のファイルに分割し、メンテナンス可能なコードベースの作成を容易にするインテリジェントなディレクトリ構造から始めることができます。

私はそれを立ち上げて実行するためのチュートリアルを約5分で書きました。 node.jsをインストールして、 here に従ってください

4
Matthew Lehner

The Fire Up Ember-Peepcode スクリーンキャストは一見の価値があります。

2
Nath

また、Tuts + Premiumの Let’s Learn Ember というタイトルの無料のチュートリアルをご覧ください。そのfree coursesシリーズ。このコースは、ツッツの人々が言うように、14の簡単な章に分かれています。

これがお役に立てば幸いです。

よろしく、

1
Junaid Qadir

古い Ember.jsのフレーム は、emberを初めて見た人にとってはまだ良いチュートリアルです。

0
Steve

最新のEmberJSをEmber-Dataで、Emblemテンプレートエンジンで使用する場合は、スターターキットを作成しました。すべてMiddlemanでラップされているため、CoffeeScriptで開発できます。 GitHubのすべて： http://goo.gl/a7kz6y

0
Zoltan

前から始まる一連のビデオの作成を開始しましたEmberそして、実際の世界の事柄の深刻なユースケースで怒りのEmber.

これが日の目を見ることに興味があるなら（興味があれば最終的に公開するのはうれしいです）私が作った投稿に行き、「いいね」を押してください（またはここにコメントしてください）私は推測する）：

http://discuss.emberjs.com/t/making-ember-easier-to-approach-aka-crazy-screencasts-videos-that-will-stick-in-your-mind-for-learning- ember/5284

コミュニティの繁栄に役立つだけでなく、人々が標準的なWebサイトを簡単な方法で構築する方法を学ぶのに役立つことを非常に熱望しています。

0
Julian Leviston

木炭ヨーマンのアプローチが好きです。すぐに使えるものがたくさんあります：

  • 「モジュール」アプローチを使用した素敵なフォルダアーキテクチャ。
  • 中性
  • ライブリロード
  • 縮小する
  • uく
  • jshint

もっと。

セットアップが非常に簡単で、yo charcoalアプリを作成してからyo charcoal:module myModule新しいモジュールを追加します。

詳細はこちら： https://github.com/thomasboyt/charcoal

0
Ben