Question

我正在使用require.js和knockout.js并使用手风琴和collaspable组件创建一个小菜单导航。

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数据绑定期望您使用Require.js define()阻止并返回一个viewModel函数，而不是使用JET Cookbook中显示的独立require()块。

我刚刚将这段代码用于QuickStart中的navContent.js（很好的工作btw在index.html中将QuickStart＆＃39; s ojModule数据绑定从viewName:更改为name: ...我起初错过了）：

<强> 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;
});

找不到组件ojCollapsible

1 个答案: