ノックアウト コンポーネントを作成することで、require js がどのように機能するかを理解しようとしています。テスト用に 2 つの個別のノックアウト コンポーネントを作成しました。私のディレクトリ構造は次のとおりです。
- 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>
問題は、ウィジェットのようなコンポーネントは正常に動作しているのに、サインイン コンポーネントを使用しようとするとすぐにエラーが発生することです。
Uncaught Error: "knockout" のスクリプト エラー、必要: kox http://requirejs.org/docs/errors.html#scripterror
エラーから、requirejs が間違った場所からノックアウトを読み込もうとしているようです。私の knockout.js は components ディレクトリではなく、scripts ディレクトリにあります。私が理解できないのは、like-widget コンポーネントを正しくロードしている方法ですか?
私はrequirejsを初めて使用するので、素朴な間違いを犯していると思います。指摘していただけますか?