javascript - 未找到组件 ojCollapsible

Question

我正在使用 require.js 和 knockout.js 并使用 Accordion 和可折叠组件创建一个小菜单导航。

index.html 有标签

 <div id="navigationContent" data-bind="ojModule: { name: 'navContent'}"></div>

navContent.tmpl.html 有

<div id="navContent" data-bind="ojComponent: {component: 'ojAccordion'}">
  <div id="c1">
    <span><</span> Usage</span>
    <p class="oj-p">Users</p>
  </div>
  <div id="c3" data-bind="ojComponent: {component: 'ojCollapsible', expanded:true}">
    <span>Diagnostics</span>
    <div>
     <p class="oj-p">Errors</p>
    </div>
  </div>
</div>

和 navContent.js

require(['ojs/ojcore', 'knockout', 'jquery', 'ojs/ojknockout', 'ojs/ojaccordion', 'ojs/ojcollapsible'],
function(oj, ko, $)
{
  $(document).ready(
    function()
    {
      ko.applyBindings(null, document.getElementById('navContent'))
    }
  );
});

但是，在运行页面时，菜单不会出现。 JavaScript 控制台显示错误:

Component ojCollapsible is not foundc.u.Wv @ ojcore.js:13c.u.error @ ojcore.js:12a.ia.XS @ ojknockout.js:16a.ia.Qj @ ojknockout.js:12function.a.j.q @ knockout-3.3.0.js:66l @ knockout-3.3.0.js:44a.w.a.j @ knockout-3.3.0.js:47(anonymous function) @ knockout-3.3.0.js:66a.a.o @ knockout-3.3.0.js:10g @ knockout-3.3.0.js:65h @ knockout-3.3.0.js:63k @ knockout-3.3.0.js:63a.Ja @ knockout-3.3.0.js:69a.ia._init @ ojknockout.js:12(anonymous function) @ knockout-3.3.0.js:65a.Z.a.k.u @ knockout-3.3.0.js:35(anonymous function) @ knockout-3.3.0.js:65a.a.o @ knockout-3.3.0.js:10g @ knockout-3.3.0.js:65h @ knockout-3.3.0.js:63a.ub @ knockout-3.3.0.js:69(anonymous function) @ ojmodule.js:13
ojcore.js:13 Component ojAccordion is not found

我可以看到它们位于其他组件所在的 lib 文件夹中。所以不确定问题是什么

Answer 1

因为这是OracleJET代码 所有 ojs/xxxx 组件应该已经为您注册。但是，如果您在 JET QuickStart 的上下文中使用此代码(即 --template=basic)，那么 index.html 中的 ojModule 数据绑定(bind)期望您使用 Require.js define() block 并返回 viewModel 函数，而不是使用 JET Cookbook 中显示的独立 require() block 。

我刚刚让这段代码适用于 QuickStart 中的 navContent.js (顺便说一句，将 QuickStart 的 ojModule 数据绑定(bind)从 viewName: 更改为 name: 在 index.html 中是不错的工作。 html...我一开始就错过了):

navContent.js

define(['ojs/ojcore', 'knockout', 'jquery', 'ojs/ojknockout', 'ojs/ojaccordion', 'ojs/ojcollapsible'],
function(oj, ko, $)
{
  function navContentViewModel() {
        var self = this;
        console.log('navContentViewModel here...doesn\'t do much other than load the ojs/xxxx dependencies');
    }
    return navContentViewModel;
});