我的 RequireJS 依赖链出了什么问题?
我刚刚开始使用 RequireJS,看来我没有正确表达我的依赖关系。我正在尝试映射一个相当简单的依赖关系链:
KnockoutJS
取决于 jquery-tmpl
取决于 jquery
我试图不使用 <代码>require-jquery。在我的 HTML 中,我这样做:
<script data-main="scripts/main" src="scripts/require.js"></script>
我的 main.js
:
require(
{
baseUrl: 'scripts',
paths: {
jquery: 'https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min',
jquerytmpl: "require-jquery-tmpl",
knockout: "require-knockout"
}
},
["myApp"],
function() {
$(function() {
console.log('main: triggered');
});
}
);
我的 require-jquery-tmpl.js
:
define([
"order!jquery",
"order!http://ajax.aspnetcdn.com/ajax/jquery.templates/beta1/jquery.tmpl.js"],
function() {
console.log("init tmpl");
}
);
我的require-knockout.js
:
define([
"order!jquerytmpl",
"order!./scripts/knockout-1.2.1.js"],
function() {
console.log("init ko");
}
);
最后,myApp.js
:
define(["knockout"], function() {
$(function() { ... }
}
我看到的是knockout-1.2.1.js是在 jquery-tmpl.js 之前加载和评估。 console.log
显示 init tmpl
发生在 init ko
之前,因此 RequireJS 回调按正确的顺序触发。但是,我在 Knockout 中添加了一些调试日志,我可以看到它在 init tmpl
发生之前就已被评估。
结果,当我尝试 ko.applyBindings() 时,它抱怨找不到 jQuery 模板。有趣的是,如果我手动告诉 KO 在回调中注册默认模板引擎,它工作正常并且一切都很完美。但是,我认为这只是掩盖了核心问题。
为什么 RequireJS 不等到 jquery-tmpl 加载后再评估 Knockout?
I'm just getting started with RequireJS and it appears I'm not expressing my dependencies correctly. I'm trying to map a fairly straightforward dependency chain:
KnockoutJS
depends on jquery-tmpl
depends on jquery
I'm trying not to use require-jquery
. In my HTML, I do this:
<script data-main="scripts/main" src="scripts/require.js"></script>
My main.js
:
require(
{
baseUrl: 'scripts',
paths: {
jquery: 'https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min',
jquerytmpl: "require-jquery-tmpl",
knockout: "require-knockout"
}
},
["myApp"],
function() {
$(function() {
console.log('main: triggered');
});
}
);
My require-jquery-tmpl.js
:
define([
"order!jquery",
"order!http://ajax.aspnetcdn.com/ajax/jquery.templates/beta1/jquery.tmpl.js"],
function() {
console.log("init tmpl");
}
);
My require-knockout.js
:
define([
"order!jquerytmpl",
"order!./scripts/knockout-1.2.1.js"],
function() {
console.log("init ko");
}
);
And finally, myApp.js
:
define(["knockout"], function() {
$(function() { ... }
}
What I'm seeing is that knockout-1.2.1.js is getting loaded and evaluated before jquery-tmpl.js. The console.log
s show that init tmpl
happens before init ko
, so the RequireJS callbacks are firing in the right order. But, I added some debug logs in Knockout and I can see that it's getting evaluated way before init tmpl
happens.
As a result, when I try to ko.applyBindings()
, it complains that jQuery templates can't be found. The funny thing is that if I manually tell KO to register the default template engine in the callback, it works fine and everything's perfect. But, I think that's just masking the core issue.
Why isn't RequireJS waiting until jquery-tmpl is loaded before evaluating Knockout?
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(2)
我无法诊断实际问题,但我通过在模块定义的部分中使用
require
而不是define
来使我的依赖项正常工作。对我有用的配置如下所示:My
main.js
:My
require-jquery-tmpl.js
:请注意,我说的是
require
jquery.tmpl.js 和order
,而不是在define
依赖项中列出它。对
require-knockout.js
进行相同的更改:这解决了我的问题,但我仍然没有解释为什么
RequreJs
order
插件无法按照我的原始定义正常工作。I haven't been able to diagnose the actual problem, but I got my dependencies working by using
require
instead ofdefine
in parts of the module definition. The configuration that works for me looks like this:My
main.js
:My
require-jquery-tmpl.js
:Notice I'm saying
require
jquery.tmpl.js withorder
instead of listing it in thedefine
dependencies.Same change to
require-knockout.js
:This fixes my problem, but I still do not have an explanation for why the
RequreJs
order
plugin doesn't work correctly with my original definitions.您的
scripts
目录中是否有order.js
文件?另外,requirejs 网站建议当您还想要时使用 require-jquery.js 而不是 require.js包括 jquery.我一直用它没有问题。
Do you have the
order.js
file in yourscripts
directory?Also, the requirejs site suggests using require-jquery.js instead of require.js when you also want to include jquery. I've always used that without problems.