javascript - Uncaught Error : Component 'my-component' : Unknown viewModel value: [object Object]

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 :

    <div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>    
    
        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();
          }
        );
    
    
    </code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>    
    
        <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>
    
    </code></pre>
</div>
</div>

如您所见，我正在尝试在 load_Component div 标记中加载我的组件。我给出了 my-component 的引用，它在各自的 js 中与组件客户一起定义。文件夹结构请参见图片。

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

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