Ember.js 和 RequireJS

Posted 2023-02-19

【中文标题】Ember.js 和 RequireJS

【英文标题】：Ember.js and RequireJS

【发布时间】：2012-02-05 06:19:38

【问题描述】：

有没有人在 RequireJS 和 Ember.js 上取得了很大的成功？看到 Ember 喜欢将其结构分配给一个全局对象，我发现它确实可以与 Requirejs 相提并论。像 LAB.js 这样的东西会更适合 Ember 吗？

【问题讨论】：

我还发现 requirejs 很难与其他库一起使用，反之亦然。这就是为什么我创建了一个更易于使用并使用 Angular 进行测试的库。底部有一个演示应用程序：gngeorgiev.github.io/Modulerr.js 您也可以将所有脚本合二为一，而不依赖于 Modulerr.js

【参考方案1】：

Ember CLI 支持转译为 AMD 的 ES6 模块语法。似乎社区正在支持 Ember CLI 作为使用 Ember 的首选方式。

http://www.ember-cli.com

【参考方案2】：

Mimosa 有几个使用 Ember 和 Require.js 的优秀示例项目。这是一个结帐：https://github.com/dbashford/mimosa-ember-emblem-templates。 README 中有相关说明。

【参考方案3】：

我刚刚上传了一个用于 EmberJS+RequireJS 的入门工具包到 github，你可以查看它https://github.com/fernandogmar/Emberjs-RequireJS

我们将不胜感激任何好的建议。玩得开心！

【参考方案4】：

有一个更好的方法来包含一个把手文件，它可以有多个模板块。可以在一个包含中编译和使用。

例如：您有以下 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;
);

【讨论】：

非常优雅。对 Ember 使用 requireJS 是一种“最佳实践”，还是一种组织大型项目的方式？我真的在寻找一种方法来构建我的项目，但我对让代理一直预加载所有内容感觉很糟糕。另一方面，这样会更清楚。

【参考方案5】：

编辑 (2012-01-30)：我在 bitbucket 上的 repo 中推送了一个更完整的示例。

我已成功使用 RequireJS 加载 Ember.js 以及 datetime 插件 (github)。 Ember 命名空间本身保持全局，但我的所有应用程序数据，包括我的 Ember.Application 实例，都通过 RequireJS 保存在模块中。我还使用“文本！”加载车把模板！插件。

我还没有遇到任何问题，但这不是一个完整的应用程序，更多的是概念证明。这是我如何使它工作的。我可以直接使用 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 vMyApp.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 捆绑在一起）。

【讨论】：

按照您的方法时，我收到此错误：错误：尚未加载模块名称“ember-runtime”以获取上下文：_您有任何解决方法的想法吗？我没有想法:)

也许你有一个公共回购，我可以在其中查看你的样本？这会很方便！

@claude-precourt 看起来 MyApp 被声明为全局变量，因为您没有使用 var 关键字。您确定这在不使用全局上下文的情况下也有效吗？

@YanivDeRidder ：当我忘记删除 datetime 插件顶部的“require”语句时，我遇到了同样的错误。不，我还没有包含此代码的存储库。但我正在开发一个简单的演示应用程序，我会在某处发布。

@TimoWestkämper：您对 MyApp 的全球范围是正确的。如果 MyApp 不是全局的，则车把模板无法引用它。我还没有找到管理这些模板上下文的方法。