我正在学习淘汰赛，我需要一些帮助。我的菜单组件将不会显示（即应显示“ Boo ya ka sha”）。在chrome中（在脚本检查器下），我可以看到htmlString设置正确（即，组件/menu.html的内容）。请帮助。
index.html的
<html>
<head>
...
<script data-main="js/app" src="js/require.js"></script>
</head>
<body>
...
<menucomponent></menucomponent>
</body>
</html>
JS / app.js
requirejs.config({
"baseUrl": "js",
"paths": {
"app": "app",
"jquery": "jquery-2.2.3",
"knockout":"knockout-3.4.0",
"main": "main",
"menu": "../components/menu",
"text": "require-text"
}
});
// make a component called menucomponent
require(['knockout'], function(ko) {
ko.components.register('menucomponent', {require: 'menu'});
});
// Load the main app module to start the app
requirejs(["main"]);
组分/ menu.js
define(['knockout','text!./menu.html'], function(ko, htmlString) {
function menuViewModel() {
this.myMessage = ko.observable("Boo ya ka sha");
}
return { viewModel: menuViewModel,
template: htmlString
};
});
组分/ menu.html
<div data-bind='text: myMessage'></div>
淘汰赛仅支持对viewmodel的amd注册，因此请尝试以下操作：
在js / app.js中，将组件注册更改为：
require(['knockout','text!./menu.html'], function(ko, htmlString) {
ko.components.register('menucomponent', {
viewModel: { require: 'menu'},
template: htmlString
});
并将components / menu.js更改为：
define(['knockout'], function(ko) {
function menuViewModel() {
this.myMessage = ko.observable("Boo ya ka sha");
}
return menuViewModel;
});