外部组件的敲除和要求

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了外部组件的敲除和要求相关的知识,希望对你有一定的参考价值。

我正在学习淘汰赛,我需要一些帮助。我的菜单组件将不会显示(即应显示“ 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;
});

以上是关于外部组件的敲除和要求的主要内容,如果未能解决你的问题,请参考以下文章

使用敲除和微风时“TypeError:对象不是函数”

解决不一致的敲除检查绑定

具有“只读”和“禁用”等属性的敲除 attr 绑定

输入按键的敲除事件绑定导致奇怪的行为

使用 Jquery 加载填充 jquery ui 对话框时的敲除绑定

带有按钮的表格上的敲除映射和 foreach 数据绑定,缺少对视图模型的引用?