105

バージョン 1.0.0 に近づいた (そして到達した!) Ember JS の進化についていくのは困難でした。チュートリアルとドキュメンテーションは行き来し、ベスト プラクティスと元の開発者の意図について多くの混乱を引き起こしました。

私の質問はまさにそれです: Ember JS のベストプラクティスは何ですか? Ember JS の使用方法を示す最新のチュートリアルや実用的なサンプルはありますか? コードサンプルは素晴らしいでしょう！

みんな、特に Ember JS 開発者に感謝します!

4

10 に答える 10

110

Mike Grassotti の Minimum Viable Ember.js クイックスタート ガイド

このクイックスタート ガイドでは、数分でゼロからわずかに 0 を超えるレベルに到達できます。完了すると、ember.js が実際に機能することをある程度確信できるようになるはずです。うまくいけば、さらに詳しく知りたいと思うようになるでしょう。

警告: このガイドを試すだけではなく、「jQuery や Fortran でクイックスタート ガイドをより適切に記述できた」などと考えるのはやめましょう。私はエンバーなどであなたを売り込もうとしているわけではありません。このガイドはハローワールド以上のものではありません.

ステップ 0 - jsFiddle を確認する

このjsFiddleには、この回答のすべてのコードがあります

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

Ember.js には jQuery と Handlebars の両方が必要です。これらのライブラリが 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 ページの本文を置き換えます。いつの日か、これらのテンプレートは、sprockets または grunt.js によって組み立てられた個別の .hbs ファイルに含まれる予定です。今のところ、すべてを 1 つのファイルに保持し、スクリプト タグを使用します。

applicationまず、1 つのテンプレートを追加しましょう。

<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 ガイドを読む
  • Peepcodeのスクリーンキャストを購入するかもしれません
  • こちらの Stack Overflow または ember IRC で質問してください

参考までに、私の元の答え：

私の質問は、Ember.js の専門家、そしてそれぞれのチュートリアルの作成者に向けたものです。

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

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

Code Lab の設計では、Ember は (彼のカスタム JS の 100% であるにもかかわらず) アプリケーション内に存在することに近いように見えますが、Trek のアプリケーションは Ember 内により多く存在するように見えます。

あなたのコメントはばかげています。CodeLab は、ember のコア コンポーネントを活用し、グローバル スコープからそれらにアクセスしています。それが書かれたとき (9 か月前)、これはかなり一般的でしたが、今日の ember アプリケーションを作成するためのベスト プラクティスは、Trek が行っていたことにはるかに近いものになっています。

とはいえ、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を使用して、別の例も示します。

于 2013-01-07T23:10:58.583 に答える
17

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

Ember-CLI

コマンドラインをある程度使いこなす必要がありますが、コミュニティが推奨するベスト プラクティスを使用して最新の Ember プロジェクトを数秒で生成できます。

Mike Grassottiの回答のように難しい方法でEmber.jsプロジェクトをセットアップすることは有益ですが、本番コードではそうしないでください。Ember-CLI特に、Yehuda が承認したハッピー パスを表示するような強力で使いやすいプロジェクトがある場合は特にそうです。

于 2015-04-18T18:56:12.877 に答える
10

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

于 2013-03-28T07:37:34.810 に答える
4

Yeomanとそれに付随する Ember Generator の使用を強くお勧めします。アプリの開発、テスト、本番用の準備に必要なすべてのツールがすぐに利用できます。追加のボーナスとして、ビュー テンプレートを複数のファイルに分割し、保守可能なコードベースの作成を容易にするインテリジェントなディレクトリ構造から始めることができます。

約 5 分で起動して実行するためのチュートリアルを作成しました。node.js をインストールして、ここに従ってください

于 2013-07-28T01:17:50.680 に答える
0

私は、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 サイトを簡単な方法で構築する方法を学ぶのを助けるためにそれを作ることに非常に熱心です.

于 2014-05-16T06:20:05.783 に答える
0

Ember.jsの旧式のFlame は、ember を初めて見る人にとってはまだ良いチュートリアルです。

于 2014-01-08T18:21:52.027 に答える
0

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

于 2013-10-21T00:35:52.887 に答える
0

私は木炭ヨーマンアプローチを好みます。それはあなたに次のような箱から出してすぐに使えるたくさんのものを提供します：

  • 「モジュール」アプローチを使用した優れたフォルダー アーキテクチャ。
  • 中性
  • ライブリロード
  • 縮小する
  • 醜くする
  • シント

もっと。

セットアップは非常に簡単で、実行yo charcoalしてアプリを作成しyo charcoal:module myModule、新しいモジュールを追加するだけです。

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

于 2013-06-11T17:56:07.003 に答える