未找到組件ojCollapsible

Question

我使用require.js和knockout.js並使用accordion和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()塊。

我剛剛得到這個代碼，以在快速入門navContent.js工作（很好的工作，順便說一句，從viewName:改變快速入門的ojModule數據綁定到name: index.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; 
});