外部组件淘汰和要求答案

【问题标题】：External component Knockout and Require外部组件淘汰和要求
【发布时间】：2017-04-17 00:29:16
【问题描述】：

我刚刚学习淘汰赛，我需要一些帮助。我的菜单组件不会出现（即它应该说“Boo ya ka sha”）。在 chrome 中（在脚本检查器下）我可以看到 htmlString 设置正确（即到 components/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>

【问题讨论】：

能否请您检查是否还有控制台错误？
Chrome 中没有控制台错误/警告
我也尝试过（没有成功）像这样（在 js/app.js 中）注册组件 require(['knockout', 'menu'], function(ko,menuComponent) { ko. components.register('menucomponent', menuComponent); });

标签： javascript jquery html knockout.js requirejs

【解决方案1】：

Knockout 仅支持 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;
});

【讨论】：