Mike Grassottiの最小実行可能Ember.jsクイックスタートガイド
このクイックスタートガイドを使用すると、数分でゼロからゼロよりわずかに多くなります。完了すると、ember.jsが実際に機能することをある程度確信できるはずです。うまくいけば、詳細を学ぶのに十分興味があるでしょう。
警告：このガイドを試してみてはいけません。それで、残りが悪ければ「クイックスタートガイドをjQueryやFortranで書けます」などと思います。私はあなたを燃えさしなどで売ろうとはしていません。このガイドはhello-worldに過ぎません。
ステップ0-jsFiddleを確認する
このjsFiddleには、この回答のすべてのコードがあります
ステップ1-ember.jsおよびその他の必要なライブラリを含める
Ember.jsにはjQueryとハンドルバーの両方が必要です。これらのライブラリが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つ以上のハンドルバーテンプレートのコンテンツを使用して、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は、定義しない場合は自動的に作成されますが、ここでカスタマイズしてメッセージプロパティを追加します。
<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ルーターは、ユーザーのルートに応じて適切なテンプレートをコンセントにレンダリングします。また、{{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>
できた！
このアプリケーションの実際の例は、こちらから入手できます。
このjsFiddleを独自のemberアプリの出発点として使用できます
次のステップ...
参考までに、私の元の答え：
私の質問は、任意のEmber.jsエキスパート、そして確かにそれぞれのチュートリアルの作成者向けです。1つのチュートリアルのデザインパターンをいつ使用し、いつ他のチュートリアルのデザインパターンを使用する必要がありますか。
これらの2つのチュートリアルは、作成時のベストプラクティスを表しています。確かに、それぞれから学べることはありますが、ember.jsは非常に高速で動いているため、悲しいことに、どちらも古くなってしまいます。2つのうち、トレックははるかに最新です。
それぞれのコンポーネントは個人の好みであり、アプリが成熟するにつれてどのコンポーネントが不可欠となるでしょうか？新しいエンバーアプリケーションを開発している場合、コードラボアプローチに従うことはお勧めしません。古すぎて便利ではありません。
Code Labの設計では、Emberはアプリケーション内に存在しているように見えますが（カスタムJSの100％であるにもかかわらず）、TrekのアプリケーションはEmber内に存在するようです。
あなたのコメントは強打です。CodeLabは、コアエンバーコンポーネントを活用し、グローバルスコープからそれらにアクセスしています。それが書かれたとき（9か月前）はこれはかなり一般的でしたが、今日の残り火アプリケーションのベストプラクティスは、Trekがやっていたことに非常に近いものです。
とはいえ、トレックのチュートリアルでさえ時代遅れになっています。必要ApplicationViewでApplicationController、現在フレームワーク自体によって生成されているコンポーネント。
断然最新のリソースは、http：//emberjs.com/guides/で公開されている一連のガイドです。
は、過去数週間にわたってゼロから作成され、最新（プレリリース）バージョンのemberを反映しています。
ここでトレックのwipプロジェクトも確認してください。https：//github.com/trek/ember-todos-with-build-tools-tests-and-other-modern-conveniences
編集：
@ sly7_7：ember-data https://github.com/dgeb/ember_data_exampleを使用して、他の例も示します