Question

我创建了一个页面，我想在该页面上加载另一个oracle jet组件，但是
每当我加载此页面时，它就会向我显示以下错误消息：

 knockout-3.4.0.debug.js:3758 Uncaught Error: Component 'my-component': Unknown viewModel value: [object Object]
        at knockout-3.4.0.debug.js:3758
        at resolveViewModel (knockout-3.4.0.debug.js:3704)
        at Object.loadViewModel (knockout-3.4.0.debug.js:3605)
        at Object.getFirstResultFromLoaders [as _getFirstResultFromLoaders] (knockout-3.4.0.debug.js:3507)
        at knockout-3.4.0.debug.js:3641
        at Object.execCb (require.js:1696)
        at Module.check (require.js:883)
        at Module.<anonymous> (require.js:1139)
        at require.js:134
        at require.js:1189

    below are the code snippets :

    

    
    
        define(['ojs/ojcore', 'knockout', 'jquery', 'appController','ojs/ojmodule','ojs/ojbutton'],
         function(oj, ko, $, app) {
          
            function CustomerViewModel() {
              var self = this;
              
           
              self.buttonClick = function(event){
               
                     // return true;
              };
            // Header Config
              self.headerConfig = {'viewName': 'header', 'viewModelFactory': app.getHeaderModel()};
    
          ko.components.register('my-component', {
            viewModel: { require: 'viewModels/register' },
            template: { require: 'text!views/register.html' }
        });
    
            }
    
            
            return new CustomerViewModel();
          }
        );
    
    
    
    
    
        <div class="oj-hybrid-applayout-page">
          <div class="oj-applayout-fixed-top">
              <!--
               ** Oracle JET V4.2.0 hybrid mobile application header pattern.
               ** Please see the Oracle JET Cookbook App Shell: Hybrid Mobile demos for
               ** more information on how to use this pattern.
            -->
            <header role="banner" class="oj-hybrid-applayout-header" data-bind="ojModule: headerConfig">
            </header>
          </div>
          <!-- This is where your main page content will be loaded -->
          <div class="oj-applayout-content">
            <div role="main" class="oj-hybrid-applayout-content">
              <div class="oj-hybrid-padding">
                <h1>Hello Customer! Welcome to MyApp. Please Login with your credentials or Register yourself</h1>
                    <div id='buttons-container'>      
                       <button id= "button"
                data-bind="click: buttonClick,
                           ojComponent: { component: 'ojButton', label: 'Login' }">
                        <button id= "button"
                data-bind="click: buttonClick,
                           ojComponent: { component: 'ojButton', label: 'Register' }">
                    
    
                    </div id='load_Component'>
                   
                    <div data-bind='component: "my-component"'></div>
                  
              </div>
            </div>
          </div>
        </div>

如您所见，我正在尝试将我的组件加载到load_Component div标签中。我给出了my-component的参考，该参考是在与组件客户的相应js中定义的。请查看文件夹结构alos的图像。

Answer 1

错误是您声明viewModel的地方：

  ko.components.register('my-component', {
                viewModel: { require: 'viewModels/register' },
                template: { require: 'text!views/register.html' }

viewModel should be instead:

viewModel: require('viewModels/register')

或

const RegisterViewModel = require('viewModels/register')

viewModel: RegisterViewModel

但是无论如何，您不应该将对象传递给视图模型

未捕获的错误：组件'my-component'：未知的viewModel值：[object Object]

1 个答案: