web-dev-qa-db-ja.com

Ember.jsとRequireJS

誰かがRequireJSとEmber.jsで大成功しましたか？ Emberの構造はグローバルオブジェクトに割り当てられるのが好きです。本当にRequirejsと頭を突き合わせることができることがわかりました。LAB.jsのようなものがEmberに適していますか？

javascriptember.jsrequirejs
34
Jonesy

[〜＃〜] edit [〜＃〜]（2012-01-30）：より完全な例を repo bitbucket。

RequireJSを使用してEmber.jsと日時アドオン（ github ）を正常にロードしました。 Ember名前空間自体はグローバルのままですが、Ember.Applicationのインスタンスを含む、私のアプリケーションのすべてのデータは、RequireJSを介してモジュール内に保持されます。また、 'text ！ 'プラグイン。

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

1）Ember.jsはBPM/Spadeを使用しているため、リポジトリのクローンを使用できませんでした。代わりに、コンパイルされたバージョンをモジュール内にラップします。

lib/ember.js：

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

これ自体はEmber=をグローバルスコープから隠さないことに注意してください。しかし、将来的には、他のすべてのクラスを隠すことができるように設定していますこのモジュールに依存するモジュールは、現状のまま動作します。

2）モジュールはEmberのように参照できます：

app/core.js：

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

ここで、「Em」は別の名前になっている可能性があります。グローバル変数を直接参照するのではなく、lib/ember.jsで定義されたモジュールから取得されます。

3）Emberがアクセスできるようにするには、ハンドルバーを登録する必要があります。

app/templates/my-template.handlebars：

MyApp v{{MyApp.VERSION}}.

app/views/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がバンドルされています）。

31
Claude Précourt

複数のテンプレートブロックを持つことができるハンドルバーファイルを含めるより良い方法があります。コンパイルして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;
});
8
Rohan Chitambar

EmberJS + RequireJSのスターターキットをgithubにアップロードしました。確認できます https://github.com/fernandogmar/Emberjs-RequireJS

どんな良い提案も高く評価されます。楽しんで！

3
Fernando Gm

Ember CLIは、AMDに移行するES6モジュール構文をサポートしています。コミュニティはEmberの好ましい使用方法としてEmber CLIに遅れを取っているようです。

http://www.ember-cli.com

3
Christos

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

0
David Bashford