Ember.jsとRequireJS

Question

誰もRequireJSとEmber.jsで多くの成功を収めましたか？ Emberが構造体をグローバルオブジェクトに割り当てたいと思っているのを見て、私はそれがRequirejsで本当に頭を上げることができることを見出しています。 EmberにとってLAB.jsの方がうまくいくのでしょうか？

Answer 1

EDIT（2012-01-30）：私はbitbucketのrepoに完全な例を追加しました。

Ember.jsとdatetimeアドオン（github）を読み込むために、RequireJSを正常に使用しました。 Emberネームスペース自体はグローバルなままですが、Ember.Applicationのインスタンスを含むすべてのアプリケーションのデータは、RequireJSを介してモジュール内に保持されます。私はまた、 'テキストを使用してハンドルバーのテンプレートを読み込んでいます！'プラグイン。

まだ問題はありませんが、これは完全なアプリケーションではなく、概念証明です。ここで私はそれを動作させた方法です。サーバーを必要とせずにSafariで直接アプリケーションをロードすることができます。 Chromeでロードするにはサーバーが必要ですが、JavaScriptをファイルシステムからロードすることはできません。

1） Ember.jsはBPM/Spadeを使用しているため、Repoのクローンを使用できませんでした。 ember.js

のlib /：：自身で、これはグローバルスコープからエンバーを隠していないこと

define(['jquery', 
     'plugins/order!lib/ember-0.9.3.js', 
     'plugins/order!lib/ember-datetime.js'], 
     function() { 
      return Ember; 
}); 

注代わりに私は、モジュール内でコンパイルされたバージョンをラップしています。しかし、私は、将来、私はそれを隠すことができるように、このモジュールに依存する他のすべてのモジュールがそのまま動作するように物事を設定しています。

2）モジュールがそうのようエンバーを参照することができます。

アプリ/のCore.js：

ここ

define(['lib/ember'], function(Em) { 
    MyApp = Em.Application.create({ 
     VERSION: "0.0.1" 
    }); 
    return MyApp; 
}); 

を、 "エムは、" 何かを命名されている可能性があり、グローバル変数を直接参照するのではなく、lib/ember.jsで定義されているモジュールに由来します。

3）がエンバーでアクセス可能であるためには、ハンドルを登録する必要があります：

アプリ/テンプレート/私の-template.handlebars：

MyApp v{{MyApp.VERSION}}. 

アプリ/ビュー/ my- view.js：

define(['lib/ember', 
     'plugins/text!app/templates/my-template.handlebars'], 
     function(Em, myTemplateSource) { 

      Em.TEMPLATES["my-template"] = Em.Handlebars.compile(myTemplateSource); 

      var myView = Em.View.create({ 
       templateName: "my-template"; 
      }); 

      return myView; 
}); 

4）私はrequire-jquery.js（jQueryとRequireJSを一緒にバンドルしています）を使用しています。

Answer 2

複数のテンプレートブロックを持つことができるハンドルバーファイルを含めるためのより良い方法があります。どちらがコンパイルされ、1つのインクルードで利用できるか。例えばのための

：私は

../templates/sample.handlebars

<div><!-- just a filler html tag. Wont show up in your page --> 
    <script type="text/x-handlebars" data-template-name="template1"> 
     Some Html or Template Content ... 
    </script> 
    <script type="text/x-handlebars" data-template-name="template2"> 
     Some Html or Template Content ... 
    </script> 
    <script type="text/x-handlebars" data-template-name="template3"> 
     Some Html or Template Content ... 
    </script> 
</div> 

../views/sampleView.js

define([ 
    'jquery', 
    'lib/ember', 
    'plugins/text!../templates/sample.handlebars'], 
    function($, Em, myTemplateSource) { 

     // Bootstrap method accepts a context element under which all handlebars 
     // template blocks are defined. The filler <div> in this case. 
     // Compiles and assigns to the EM.TEMPLATES hash correctly. 
     Em.Handlebars.bootstrap($(myTemplateSource)); 

     var myView = Em.View.create({ 
      templateName: "template1"; 
     }); 

     return myView; 
}); 

Answer 3

：あなたは、次のハンドルバーテンプレートファイルを持っていますEmberJS + RequireJSのスターターキットをgithubにアップロードしただけで確認できますhttps://github.com/fernandogmar/Emberjs-RequireJS

良い提案が高く評価されます。楽しむ！

Answer 4

ミモサには、EmberとRequire.jsを使用したいくつかの優れたサンプルプロジェクトがあります。チェックアウトには次のようなものがあります：https://github.com/dbashford/mimosa-ember-emblem-templatesそれを得るための指示はREADMEにあります。

Answer 5

Ember CLIは、AMDに移行するES6モジュール構文をサポートしています。 Emberを使用するための好ましい方法として、コミュニティがEmber CLIの背後にあるようだ。

http://www.ember-cli.com