requireJS 模块的同步方法调用

Question

我正在尝试使用 Oracle Jet 组件构建一个导航栏，因为我担心我的代码的模块化，我正在为我的导航栏提供来自我使用 requireJS 加载的另一个模块的所需信息。执行时出现此错误 Message: Unable to process binding "foreach: function (){return pages }" Message: pages is not defined

我的第一个猜测（使用断点后）是绑定是在我的变量 pages 获取适当数据之前完成的。如果是这样，我如何确保导航栏仅在我的变量正确初始化后才打印，如果不是，我做错了什么？

这是我的代码：

模板

<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>

模板的 JS

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

数据模块

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

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>

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

在 require 调用之前将页面定义为一个空的可观察数组

requireJS 模块的同步方法调用

Sync method call for a requireJS module

javascript

synchronization

requirejs

knockout.js

oracle-jet