我尝试使用 knockout 组件。我使用 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> © 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
});
});
如何解决此问题？我的代码中有什么明显错误吗？
最佳答案
我追踪了 knockout 的源代码。当丢失设置页面时，模板配置不正确。我检查了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
});
关于javascript - Uncaught Error : Component 'settings' : Unknown template value: [object Object]，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44753886/