使用AMD时未定义的剔除组件视图模型
使用AMD时未定义的剔除组件视图模型
提问于 2015-03-24 16:57:06
我一直试图在一个我一直在做的项目中使用require.js中的Knockout组件。当我使用该组件时，它将显示HTML模板，但是模板中的绑定会抛出一个引用错误，说明字段是未定义的。我相信这是因为1。viewModel是未定义的，或者是2。viewModel没有绑定到模板。但是我想不出怎么解决这个问题。
我正在使用火狐开发版phpStorm中的内置服务器。
index.php
<?php
namespace project;
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Project | Admin</title>
<link rel="stylesheet" href="css/grid.css"/>
<style>
</style>
</head>
<body>
<admin-header params=""></admin-header>
<script src="js/vendor/require.js" data-main="js/app"></script>
</body>
</html>app.js
requirejs.config({
paths: {
jquery: 'vendor/jquery',
postbox: 'vendor/knockout-postbox',
domReady: 'vendor/domReady',
text: 'vendor/text',
knockout: 'vendor/knockout',
hashchange: 'vendor/hashchange',
underscore: 'vendor/underscore',
ComponentManager: 'components/ComponentManager'
},
shim: {
knockout: {
deps: ['jquery']
},
hashchange: {
deps: ['jquery']
},
underscore:{
exports: '-'
}
}
});
require(['knockout', 'AdminViewModel', 'domReady!'], function(ko, AdminViewModel){
ko.applyBindings(new AdminViewModel());
});AdminViewModel.js
define(['knockout', 'postbox', 'ComponentManager'], function( ko, postbox, ComponentManager) {
return function AdminViewModel() {
var self = this;
self.pageTitle = ko.observable('Home').publishOn('pageTitle');
var componentManager = new ComponentManager();
componentManager.registerComponents(['admin-header']);
/*
// doesnt work when registered in the parent view either
ko.components.register(
'admin-header', {
require: 'components/admin-header/admin-header'
}
);
*/
}
});ComponentManager，js
define(['knockout', 'underscore', 'require'], function(ko, _, require){
return function ComponentManager() {
this.registerComponents = function(components) {
_.each(components, function (component) {
var componentPath = 'components/' + component + '/' + component;
console.log("registering: " + componentPath );
ko.components.register(component, {
require: componentPath
});
});
}
}
});.定义(‘剔除’，‘邮筒’，‘文本！/admin-header_template.html’，
function(ko, postbox, template){
function AdminHeaderModel(params){
var self = this;
self.pageTitle = ko.observable('Title');//.subscripeTo('pageTitle', true, function(title){return title.toUpperCase()});
}
return {
viewmodel: AdminHeaderModel,
template: template
};
});admin-header-template.html
<div>
<h1>Project</h1>
<h1 data-bind="text: pageTitle"></h1>
</div>回答 1
Stack Overflow用户
回答已采纳
发布于 2015-03-24 17:49:36
在admin-header组件代码中，您需要返回一个viewModel属性，而不是viewmodel。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/29238571
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号