0

Ich versuche eine Navigationsleiste mit Oracle Jet-Komponenten zu bauen, da ich wegen der Modularität meines Codes besorgt bin, füttere ich meine Navbar mit den benötigten Informationen von einem anderen Modul, das ich lade requireJS. Wenn er ausgeführt wird bekomme ich diese Fehler Message: Unable to process binding "foreach: function(){return pages }" Message: pages is not definedAufruf der Sync-Methode für ein requireJS-Modul

Meine erste Vermutung (nach Stützpunkte verwenden) ist, dass die Bindung vor meiner Variable Seiten getan wird die entsprechenden Daten bekommt. Wenn dies der Fall ist, wie kann ich sicherstellen, dass die Navbar nur druckt, nachdem meine Variable richtig initialisiert wurde, wenn nicht, was mache ich falsch?

hier ist mein Code:

die Vorlage

<div id="topbar"> 
<div class="oj-sm-condense" data-bind="ojComponent:{ 
       component: 'ojNavigationList', 
       selection: currentPage, 
       navigationLevel: 'application', 
       edge: 'top'}" > 

    <ul id="pills" > 
    <!-- ko foreach: pages --> 
    <li data-bind="attr:{id:id}"> 
     <a data-bind="attr:{href:url}"> 
      <p data-bind="text:label"></p> 
     </a> 
    </li> 
    <!-- /ko--> 
    </ul> 
</div> 
</div> 

die JS für die Vorlage

define(['ojs/ojcore', 'knockout', 'ojs/ojnavigationlist' 
], function (oj, ko) { 

function homeContentViewModel(data) { 

    var self = this; 
    require(['banner/' + data], function (pages) { 
     self.pages=pages; 
    }); 
} 
return homeContentViewModel; 
}); 

Das Datenmodul

define(['ojs/ojcore', 'knockout', 'ojs/ojnavigationlist' 
], function (oj, ko) { 

    this.currentPage=ko.observable('Page1'); 
    var self = this; 
    var pages = [ 
    {id: "id1", label:"Page1", url: "#"}, 
    {id: "id2", label:"Page2", url: "#"}, 
    {id: "id3", label:"Page3", url: "#"}, 
    {id: "id4", label:"Page4", url: "#"}, 
    {id: "id5", label:"Page5", url: "#"}, 
    {id: "id6", label:"Page6", url: "#"}, 
    ]; 

    return pages; 
}); 

Die index.html

<html> 
<head> 
    <title>navbar</title> 
    <meta charset="UTF-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <script data-main="js/main" src="js/libs/require/require.js" type="text/javascript"></script> 
    <link href="css/libs/oj/v2.0.1/alta/oj-alta-min.css" rel="stylesheet" type="text/css"/> 
    <link rel="stylesheet" type="text/css" href="style.css"> 
</head> 
<body> 
    <div data-bind="ojModule: {name: 'path/to/template', params: 'dataModuleName'}"></div> 
</body> 
</html> 

Antwort

1
define(['ojs/ojcore', 'knockout', 'ojs/ojnavigationlist' 
], function (oj, ko) { 

function homeContentViewModel(data) { 

    var self = this; 
    self.pages = ko.observableArray(); 
    require(['banner/' + data], function (pages) { 
     self.pages(pages); 
    }); 
} 
return homeContentViewModel; 
}) 

definieren Seiten als leere beobachtbaren Array, bevor der Anruf

+0

benötigen Es funktioniert perfekt! vielen Dank :) – achref