我试图通过构建 knockout 组件来了解 require js 的工作原理。我已经构建了 2 个单独的 knockout 组件用于测试。我的目录结构如下:
- App
|_ Components
|_ Like-Widget
|_like-widget.js
|_like-widget.html
|_ sign-in
|_sign-in.js
|_sing-in.html
|_ startup.js
- Scripts
|_ 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 组件工作正常,但是当我尝试使用我的登录组件时,我收到错误
Uncaught Error :“knockout”的脚本错误,需要:kox http://requirejs.org/docs/errors.html#scripterror
从错误看来,requirejs 正试图从错误的位置加载 knockout,我的 knockout.js 不在组件目录中,而是在脚本目录中。我不明白的是它是如何正确加载 like-widget 组件的?
我是 requirejs 的新手,所以我假设我犯了一些天真的错误,你能指出来吗?
最佳答案
如果您查看 knockout-es5 插件的源代码,您会发现它需要将 knockout 路径设置为“knockout”,而不是“ko”。
} else if (typeof define === 'function' && define.amd) {
define(['knockout'], function(koModule) {
ko = koModule;
attachToKo(koModule);
weakMapFactory = function() { return new global.WeakMap(); };
return koModule;
});
}
如果您更改了 knockout 的 require 配置路径
require.config({
paths: {
knockout: "/Scripts/knockout-3.4.0",
// instead of ko: "/Scripts/knockout-3.4.0"
}
它应该可以工作。您还可以移除 knockout-es5 的 shim(在您的示例中为 kox),因为不需要它。
关于javascript - Require JS with Knockout 组件在不正确的路径中寻找 js 文件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36759145/