Ember.js 和 RequireJS

IT技术 javascript ember.js requirejs
2021-03-10 12:50:41

有人在 RequireJS 和 Ember.js 方面取得了很大的成功吗?看到 Ember 喜欢将其结构分配给全局对象,我发现它确实可以与 Requirejs 对接。像 LAB.js 这样的东西会更适合 Ember 吗?

5个回答

编辑(2012-01-30):我在一个关于 bitbucketrepo 中推送了一个更完整的例子

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

我还没有遇到任何问题,但这不是一个完整的应用程序,更多的是概念证明。这是我如何使它工作。我可以直接使用 Safari 加载我的应用程序,而无需服务器。您仍然需要一个服务器来使用 Chrome 加载它,它不允许 JavaScript 从文件系统加载文件。

1)因为 Ember.js 使用 BPM/Spade,所以我不能使用 repo 的克隆。相反,我将编译后的版本包装在一个module中:

库/ember.js

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

请注意,这本身并没有在全局范围内隐藏 Ember。但是我正在设置这些东西,以便将来如果我能够隐藏它,依赖于该module的每个其他module仍将按原样工作。

2)module可以像这样引用 Ember:

应用程序/core.js

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

在这里,“Em”可以被命名为别的东西;它不直接引用全局变量,而是来自lib/ember.js 中定义的module

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 捆绑在一起)。

@TimoWestkämper:您对 MyApp 的全球范围的看法是正确的。如果 MyApp 不是全局的,则把手模板无法引用它。我还没有找到管理这些模板上下文的方法。
2021-04-24 12:50:41
@YanivDeRidder:当我忘记删除日期时间插件顶部的“require”语句时,我遇到了同样的错误。不,我还没有可用此代码的存储库。但我正在开发一个简单的演示应用程序,我会在某处发布它。
2021-04-26 12:50:41
也许你有一个公共仓库,我可以在那里查看你的样本?这会很方便!
2021-05-09 12:50:41
@claude-precourt 看起来 MyApp 被声明为全局变量,因为您没有使用 var 关键字。您确定这在不使用全局上下文的情况下也有效吗?
2021-05-10 12:50:41
遵循您的方法时,我收到此错误:错误:尚未为上下文加载module名称“ember-runtime”:_您有任何解决方法的想法吗?我没有想法:)
2021-05-11 12:50:41

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

例如:您有以下 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 是一种“最佳实践”,还是一种组织大型项目的方式?我真的在寻找一种方法来构建我的项目,但我对代理一直预加载所有内容感到不舒服。另一方面,这样就更清楚了。
2021-04-21 12:50:41

我刚刚将 EmberJS+RequireJS 的入门套件上传到 github,您可以查看https://github.com/fernandogmar/Emberjs-RequireJS

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

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

http://www.ember-cli.com

Mimosa 有一些使用 Ember 和 Require.js 的很好的示例项目。这里有一个结帐:https : //github.com/dbashford/mimosa-ember-emblem-templates实现它的说明在自述文件中。