Ember.js和RequireJS

Question

有沒有人在RequireJS和Ember.js上有過很多成功？看到Ember喜歡將其結構分配給一個全局對象，我發現它可以真正與Requirej對接。對於Ember，LAB.js會更好嗎？

Answer 1

編輯（2012-01-30）：我在bitbucket上的repo中推出了一個更完整的例子。

我已成功使用RequireJS加載Ember.js以及日期時間插件（github）。 Ember命名空間本身保持全局，但我所有的應用程序數據，包括我的Ember.Application實例，都通過RequireJS保存在模塊中。我還使用'text！'加載了句柄模板插入。

我還沒有任何問題，但這不是一個完整的應用程序，更多的是一個概念證明。以下是我的工作方式。我可以直接使用Safari加載我的應用程序，而不需要服務器。您仍然需要一臺服務器才能使用Chrome加載該服務器，該服務器不允許JavaScript從文件系統加載文件。

1）因爲Ember.js使用BPM/Spade，所以我無法使用repo的克隆。相反，我的包裹編譯版本模塊中：

的lib/ember.js：

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; 
}); 

這裏， 「EM」 也可以命名爲別的東西;它並不直接指向全局變量，而是來自lib/ember.js中定義的模塊。

3）要由灰燼訪問，車把必須註冊：

應用/模板/我-template.handlebars：

MyApp v{{MyApp.VERSION}}. 

應用程序/視圖/我的 - 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

有一個更好的方法來包含一個可以有多個模板塊的句柄文件。它可以在一個包括編譯和可用。

用於例如：您有以下把手模板文件：

../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

我剛剛上傳到Github的EmberJS + RequireJS入門套件，您可以檢查它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 CLI作爲使用Ember的首選方式。

http://www.ember-cli.com