未捕獲錯誤：組件'設置'：未知模板值：[對象對象]

我嘗試使用淘汰組件。我用requirejs到庫加載到我的代碼，但每當我這樣做，我得到這個錯誤：未捕獲錯誤：組件'設置'：未知模板值：[對象對象]

Uncaught Error: Component 'settings': Unknown template value: [object Object]

這是組件的代碼：

define(
    [ 
     "knockout", 
     "text!./settings.html", 
     "underscore", 
     "../../components/models/tabbed-navigation/tabsNavigationConfig", 
     "../../components/models/tabbed-navigation/tabitemConfig" 
    ], 
    function(ko, settingsTemplate, _) { 
     var isInitialized = false; 
     var tabsNavigationInstance = null; 
     function settingsViewModel(params) { 
      var self = this; 
      self.tabbedNavigation = new ko.observable(); 
      if(!isInitialized) { 
       isInitialized = true; 
       tabsNavigationInstance = init(params); 
      } 
      self.tabbedNavigation(tabsNavigationInstance); 
      self.route = new ko.observable(); 
      if(params.tab) { 
       self.route(params.request_); 
      } 
      return self; 
     }; 

     function init(params) { 
      var newTabs = []; 
      for(var i = 0; i < 5; i++) { 
       var key = 'tab' + i; 
       newTabs.push(new tabitemConfig(
        "Settings " + i, 
        "/settings/" + key, 
        key == params.tab, 
        'greeter')); 
      } 
      tabsNavigationInstance = new tabsNavigationConfig(newTabs, 0); 
      return tabsNavigationInstance; 
     } 

     return { 
      viewModel: settingsViewModel, 
      template: settingsTemplate 
     }; 
    });

這是requriejs配置的代碼：

var require = { 
    baseUrl: "./", 
    paths: { 
     "bootstrap": "thirdparty/bootstrap/js/bootstrap", 
     "jquery": "thirdparty/jquery/jquery-1.11.2", 
     "knockout": "thirdparty/knockout/knockout-3.4.2", 
     "knockout-projections": "thirdparty/knockout/knockout-projections.min", 
     "text": "thirdparty/requirejs/text", 
     'director':'thirdparty/director/director-1.2.6', 
     'underscore':'thirdparty/underscore/underscore-1.8.3' 
    }, 
    shim: { 
     "bootstrap": { 
      deps: ["jquery"] 
     } 
    } 
}

這是settings.html的內容：

<div> 
    <h1>Settings</h1> 
</div> 

<tabbed-navigation params="tabConfig : tabbedNavigation(), route: route()"> 

</tabbed-navigation>

這是index.html的內容：

<!DOCTYPE html> 
<html> 

    <head> 
     <meta charset="utf-8" /> 
     <title>Dipping your feet into KnockoutJS Components</title> 
     <link href="thirdparty/bootstrap/css/bootstrap.css" rel="stylesheet" /> 
    </head> 

    <body> 
     <div class="navbar navbar-inverse navbar-fixed-top"> 
      <div class="container"> 
       <div class="navbar-header"> 
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
       </button> 
        <a class="navbar-brand" href="/">KO Components</a> 
        <ul class="nav navbar-nav"> 
         <li> 
          <a href="#">Home</a> 
         </li> 
         <li> 
          <a href="#settings">Settings</a> 
         </li> 
        </ul> 
       </div> 
      </div> 
     </div> 
     <div id="page1" class="container" style="padding-top:50px" data-bind="component: { name: route().page, params: route }"></div> 
     <!--<pre data-bind="text: ko.toJSON($data, null, 5)"></pre>--> 
     <footer class="navbar navbar-fixed-bottom"> 
      <div class="container-fluid"> 
       <p> &copy; 2014 - Still Learning</p> 
      </div> 
     </footer> 
     <script src="app/boot/require.config.js"></script> 
     <script data-main="app/boot/startup" src="thirdparty/requirejs/require-2.3.3.js"></script> 
    </body> 

</html>

組件註冊startup.js

define(['jquery', 'knockout', './router', 'app/app', 'bootstrap', 'knockout-projections'], function($, ko, router) { 
    ko.components.register(app.components.greeter.name, { 
     require: app.components.greeter.template 
    }); 
    ko.components.register(app.pages.home.name, { 
     require: app.pages.home.template 
    }); 
    ko.components.register(app.pages.settings.name, { 
     template: { 
      require: app.pages.settings.template 
     } 
    }); 
    ko.components.register(app.components.tabitem.name, { 
     require: app.components.tabitem.template 
    }); 
    ko.components.register(app.components.tabbedNavigation.name, { 
     require: app.components.tabbedNavigation.template 
    }); 

    ko.applyBindings({ 
     route: router.currentRoute 
    }); 
});

的內容我該如何解決呢？我的代碼中有什麼明顯的錯誤嗎？

來源

2017-06-26 tommy

我追蹤了淘汰賽的源代碼。當失去設置頁面時，模板配置不正確。我檢查了startup.js的代碼。的

ko.components.register(app.pages.settings.name, { 
    template: { 
      require: app.pages.settings.template 
     } 
    });

的代碼應該是

ko.components.register(app.pages.settings.name, { 
     require: app.pages.settings.template 
});

來源

2017-06-27 01:32:24 tommy

未捕獲錯誤：組件'設置'：未知模板值：[對象對象]

回答

相關問題