我试图通过构建淘汰组件来了解js是如何工作的。我已经构建了2个独立的淘汰组件进行测试。我的目录结构如下 - 应用程序 | _组件 | _ Like-Widget | _like-widget.js | 样widget.html 登录。登录 | _sign-in.js | 唱in.html | startup.js - 脚本 | _ knockout.js | _ knockout-es5.js | _ app.js
我在app.js文件中配置了require.js,如下所示
require.config({
paths: {
ko: "/Scripts/knockout-3.4.0",
kox: "/Scripts/knockout-es5",
jquery: "/Scripts/jquery-1.10.2.min",
text: "/Scripts/text"
},
shim: {
"kox": {
deps:["ko"]
}
},
baseUrl: "/App/Components"
});
require(["/App/Components/startup.js"]);
这是我的startup.js文件
define(['ko'], function (ko) {
ko.components.register('like-widget', { require: 'like-widget/like-widget' });
ko.components.register('sign-in', { require: 'sign-in/sign-in' });
ko.applyBindings();
});
我的like-widget.js和sign-in.js文件几乎完全相同,用于测试目的
define(["kox", "text!like-widget/like-widget.html"], function (ko, template) {
function myViewModel(params) {
var self = this;
self.personName = 'Bob';
self.personAge = 23;
ko.track(this);
};
return {
viewModel: myViewModel,
template: template
};
});
define(["kox", "text!sign-in/sign-in.html"], function (ko, template) {
function signInViewModel(params) {
var self = this;
self.userName = 'User 1';
ko.track(this);
};
return {
viewModel: signInViewModel,
template: template
};
});
这就是我在html页面中引用require.js的方式
<script type='text/javascript' data-main="/Scripts/app.js" src="~/Scripts/require.js"></script>
问题是我的like-widget组件工作正常但是当我尝试使用我的登录组件时,我收到错误
未捕获错误:&#34;淘汰&#34;的脚本错误,需要:kox http://requirejs.org/docs/errors.html#scripterror
从错误看似requirejs试图从错误的位置加载knockout,我的knockout.js不在组件目录中,而是在scripts目录中。我无法理解的是它是如何正确加载like-widget组件的?
我是新手,因为我假设我犯了一些天真的错误,你能指出来吗?
答案 0 :(得分:1)
如果您查看knockout-es5插件的源代码,您会发现它需要将淘汰路径设置为“淘汰”,而不是&#39; ko&#39;。
} else if (typeof define === 'function' && define.amd) {
define(['knockout'], function(koModule) {
ko = koModule;
attachToKo(koModule);
weakMapFactory = function() { return new global.WeakMap(); };
return koModule;
});
}
如果您更改了淘汰赛的需求配置路径
require.config({
paths: {
knockout: "/Scripts/knockout-3.4.0",
// instead of ko: "/Scripts/knockout-3.4.0"
}
它应该有用。您也可以删除knockout-es5的垫片(在您的示例中为kox),因为它不应该被需要。