有人能帮助识别为什么下面的Ember.js/Require.js应用程序不能呈现索引视图吗?Ember部分100%独立工作。
application.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<script data-main="../script/application" src="http://cdnjs.cloudflare.com/ajax/libs/require.js/2.1.4/require.min.js"></script>
</head>
<body>
<script type="text/x-handlebars-template" data-template-name="index">
login page
<a href="#" {{action "login"}}>Login</a>
</script>
<script type="text/x-handlebars-template" data-template-name="application">
{{outlet}}
</script>
</body>
</html>application.js
require(["library/jquery", "library/handlebars", "library/ember"], function() {
Application = Ember.Application.create({
LOG_TRANSITIONS: true
});
Application.IndexView = Ember.View.extend({});
Application.IndexController = Ember.Controller.extend({
login: function() {
console.log("called login controller method.");
}
});
Application.Router.map(function() {
this.route("index", {
path: "/login"
});
});
});我已经确认,以下文件是成功加载的要求,没有脚本错误显示在Safari或Chrome浏览器。
版本信息
要求: 2.1.4
jQuery: v1.9.1
成员: v1.0.0-rc.1
车把: 1.0.0-rc.3
发布于 2013-02-27 10:58:18
所以在经历了一段时间的脑震荡和一夜情之后。我终于有了一个安博的例子&要求表现得很好。
https://github.com/ben-crowhurst/EmberRequireSetup
发现了一些与加载应用程序模块/依赖项有关的问题,以及Ember设置和DOM解析的时间安排。
发布于 2013-02-26 23:07:48
问题可能是由于不将依赖项传递给函数体造成的。只有当所有的依赖关系都在全局范围内“挂载”自己( requirejs的好处之一是您可以完全停止担心这一点)时,才能做到这一点。
试试这个:
require(["library/jquery", "library/handlebars", "library/ember"],
function($, handlebars, Ember) {
// verify that none of these is undefined
console.log($, handlebars, Ember);
var Application = Ember.Application.create({
LOG_TRANSITIONS: true
});
(...)
});如果输出到控制台的任何变量仍然是undefined,这表明requirejs配置是不正确的。我可以强烈推荐Chrome的开发工具:您可以在函数体的第一行中设置一个断点,并在冻结应用程序时调查本地/闭包范围。“暂停未明的例外”也有很大帮助。
另外,避免从模块内部创建全局对象是一个好主意(这就是为什么我在Application变量中添加了一个var );模块的目的之一是严格限制外部的“泄漏”。
最后,我不相信requirejs会使用存储在<script>标记中的Handlebars代码。它甚至不能保证Handlebars将由application.html的一部分的时间浏览器进程加载。我从来没有使用过handlebars,但是如果是这样的话,我确信正确的处理方法已经在某处了:)。
https://stackoverflow.com/questions/15099857
复制相似问题