Ember.js và RequireJS

Question

Có ai đã có nhiều thành công với RequireJS và Ember.js không? Nhìn thấy như Ember thích có cấu trúc của nó được gán cho một đối tượng toàn cầu, tôi thấy rằng nó có thể thực sự mông đầu với Requirejs. Chẳng hạn như LAB.js có hoạt động tốt hơn cho Ember không?

Answer 1

EDIT (2012-01-30): Tôi đã đẩy một ví dụ hoàn chỉnh hơn trong một repo trên bitbucket.

Tôi đã sử dụng thành công RequireJS để tải Ember.js cũng như addon datetime (github). Bản thân vùng tên Ember vẫn giữ nguyên toàn cục, nhưng tất cả dữ liệu của ứng dụng của tôi, kể cả thể hiện của Ember.Application, được lưu giữ trong các mô-đun thông qua RequireJS. Tôi cũng đang tải các mẫu tay lái bằng cách sử dụng 'văn bản!' cắm vào.

Tôi chưa có bất kỳ vấn đề nào, nhưng đây không phải là một ứng dụng hoàn chỉnh, nhiều bằng chứng về khái niệm. Đây là cách tôi làm cho nó hoạt động. Tôi có thể tải ứng dụng của mình trực tiếp với Safari mà không cần máy chủ. Bạn vẫn cần một máy chủ để tải nó bằng Chrome, điều này không cho phép JavaScript tải tệp từ hệ thống tệp.

1) Vì Ember.js sử dụng BPM/Spade, tôi không thể sử dụng bản sao của repo. Thay vào đó tôi gói phiên bản biên soạn trong một mô-đun:

lib/ember.js:

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

Lưu ý rằng điều này bản thân nó không giấu Ember từ phạm vi toàn cầu. Nhưng tôi đang thiết lập mọi thứ để nếu, trong tương lai, tôi có thể làm ẩn nó, mọi mô-đun khác phụ thuộc vào mô-đun này sẽ vẫn hoạt động như hiện trạng.

2) Modules có thể tham khảo Ember như vậy:

app/core.js:

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

Ở đây, "Em" có thể đã được đặt tên là cái gì khác; nó không tham chiếu trực tiếp đến biến toàn cầu, nhưng đến từ mô-đun được xác định trong lib/ember.js.

3) Để có thể truy cập bởi Ember, tay lái phải được đăng ký:

app/templates/my-template.handlebars:

MyApp v{{MyApp.VERSION}}. 

app/views/may- 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) Tôi đang sử dụng require-jquery.js (jQuery và RequireJS được nhóm lại với nhau).

Answer 2

Có cách tốt hơn để bao gồm tệp thanh điều khiển có thể có nhiều khối mẫu. Mà có thể được biên dịch và có sẵn trong một bao gồm.

cho ví dụ: Bạn có sau tay lái mẫu file:

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

tôi đã tải lên github bộ khởi động cho EmberJS + RequireJS, Bạn có thể kiểm tra nó https://github.com/fernandogmar/Emberjs-RequireJS

Bất kỳ đề xuất tốt sẽ được đánh giá cao. Chúc vui vẻ!

Answer 4

Mimosa có một vài dự án mẫu tốt bằng cách sử dụng Ember và Require.js. Đây là một thanh toán: https://github.com/dbashford/mimosa-ember-emblem-templates. Các hướng dẫn để làm cho nó đi nó đang ở trong README.

Answer 5

Ember CLI hỗ trợ cú pháp mô-đun ES6 chuyển đổi sang AMD. Có vẻ như cộng đồng đang nhận được đằng sau Ember CLI như là cách ưa thích để sử dụng Ember.

http://www.ember-cli.com