Uncaught (in promise) ReferenceError: ViewModel is not defined OJET

时间:2021-05-12 07:37:54

标签: javascript html

我正在尝试使用 Oracle OJET 工具使用存储在 data.json 文件中的虚拟 JSON 数据显示一个表。 一切正常,但在控制台日志中我看到此错误: Uncaught (in promise) ReferenceError: ViewModel is not defined 在 about.js:36 .我无法理解这个错误是什么以及如何解决它,有人可以帮忙吗?

about.js 文件:

define(['accUtils', 'knockout', 'ojs/ojbootstrap', 'ojs/ojarraydataprovider','text!data/data.json',
    'ojs/ojtable','ojs/ojknockout'],
 function(accUtils, ko, ojbootstrap_1, ArrayDataProvider, data) {
    function AboutViewModel() {
      var self = this;
      self.stackValue = ko.observable("off");
      self.orientationValue = ko.observable("vertical");
      self.dataProvider = new ArrayDataProvider(JSON.parse(data), {
          keyAttributes: "id",
          implicitSort: [{ attribute: "id", direction: "ascending" }],
      });
      
      ojbootstrap_1.whenDocumentReady().then(function () {
          ko.applyBindings(new ViewModel(), document.getElementById("table"));
      });
    return AboutViewModel;
  }
);

about.html 文件:

<div class="oj-hybrid-padding">
  <h1>About Content Area</h1>
  <div>
      To change the content of this section, you will make edits to the about.html file located in the /js/views folder.
  </div>          
  <oj-table id='table' aria-label='Departments Table'
                                          data='[[dataProvider]]'
                                          selection-mode='{"row": "multiple", "column": "multiple"}'
                                          dnd='{"reorder": {"columns": "enabled"}}'
                                          scroll-policy='loadMoreOnScroll'
                                          scroll-policy-options='{"fetchSize": 10}'
                                          columns='[{"headerText": "Id", 
                                                     "field": "id",
                                                     "headerClassName": "oj-sm-only-hide",
                                                     "className": "oj-sm-only-hide",
                                                     "resizable": "enabled"},
                                                    {"headerText": "Series", 
                                                     "field": "series",
                                                     "resizable": "enabled"},
                                                    {"headerText": "Group", 
                                                     "field": "group",
                                                     "headerClassName": "oj-sm-only-hide",
                                                     "className": "oj-sm-only-hide",
                                                     "resizable": "enabled"},
                                                    {"headerText": "Value", 
                                                     "field": "value",
                                                     "resizable": "enabled"}]'
                                          class='demo-table-container oj-bg-body'>
</oj-table>         
</div>
<style>
 .demo-table-container {
      width: 100%; 
      height: 112.5rem;
  }
</style>

0 个答案:

没有答案