有人在 RequireJS 和 Ember.js 方面取得了很大的成功吗?看到 Ember 喜欢将其结构分配给全局对象,我发现它确实可以与 Requirejs 对接。像 LAB.js 这样的东西会更适合 Ember 吗?
Ember.js 和 RequireJS
编辑(2012-01-30):我在一个关于 bitbucket的repo 中推送了一个更完整的例子。
我已经成功地使用 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 捆绑在一起)。
有一个更好的方法来包含一个可以有多个模板块的车把文件。可以在一个包含中编译和使用。
例如:您有以下 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;
});
我刚刚将 EmberJS+RequireJS 的入门套件上传到 github,您可以查看https://github.com/fernandogmar/Emberjs-RequireJS
任何好的建议将不胜感激。玩得开心!
Ember CLI 支持转译为 AMD 的 ES6 module语法。似乎社区支持 Ember CLI 作为使用 Ember 的首选方式。
Mimosa 有一些使用 Ember 和 Require.js 的很好的示例项目。这里有一个结帐:https : //github.com/dbashford/mimosa-ember-emblem-templates。实现它的说明在自述文件中。