Ember.js和RequireJS

Question

有没有人在RequireJS和Ember.js上取得多大成功？看到Ember喜欢将其结构分配给一个全局对象,我发现它可以与Requirejs真正对接.像LAB.js这样的东西会更适合Ember吗？

Answer 1

编辑(2012-01-30):我在bitbucket 的回购中推出了一个更完整的例子.

我已成功使用RequireJS加载Ember.js以及datetime插件(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;
});

请注意,这本身并不会将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捆绑在一起).

Answer 2

有一种更好的方法来包含一个可以有多个模板块的车把文件.哪个可以编译并在一个包含中可用.

例如:您有以下Handlebars模板文件:

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