knockoutjs 组件参数未定义
knockoutjs components params undefined
我正在创建一个 Knockout js 组件以在我的通知系统中使用。当我向页面添加一个组件时,我收到一条 params is undefined 消息,看起来我的 params 对象没有发送到 viewmodel 的构造函数。
起初我以为我的组件加载器有问题,所以我像这样手动注册了组件:
ko.components.register('notification-info', {
viewModel: { require: "/notifications/info" },
template: { require: "text!/notifications/info.tmpl.html"}
});
该组件包含一个名为 info.js
的 js 文件
define(['knockout'], function (ko) {
function InfoNotificationViewModel(params) {
this.type = params.type;
this.subject = params.subject;
this.title = params.title;
this.content = params.content;
}
return InfoNotificationViewModel();
});
和一个名为 info.tmpl.html
的 html 模板
<div class="notification-container" data-bind="css: type">
<div class="notification-icon"><span class="glyphicon"></span></div>
<div class="notification-content">
<div class="notification-subject" data-bind="text: subject">
</div>
<div class="notification-message">
<p data-bind="text: title"></p>
<p data-bind="text: content"></p>
</div>
</div>
我使用组件绑定将组件添加到我的页面:
<div data-bind="component: {name: 'notification-info', params: {type: 'info', subject: '',title: '', content: ''} }"></div>
稍后这将填充通过 websockets 发送的数据,因此参数将成为可观察的。
谁能告诉我我做错了什么,我认为这与我注册组件的方式有关。
您应该 return 视图模型的构造函数,而不是
return InfoNotificationViewModel();
使用
return InfoNotificationViewModel;
(没有括号)
我正在创建一个 Knockout js 组件以在我的通知系统中使用。当我向页面添加一个组件时,我收到一条 params is undefined 消息,看起来我的 params 对象没有发送到 viewmodel 的构造函数。
起初我以为我的组件加载器有问题,所以我像这样手动注册了组件:
ko.components.register('notification-info', {
viewModel: { require: "/notifications/info" },
template: { require: "text!/notifications/info.tmpl.html"}
});
该组件包含一个名为 info.js
的 js 文件define(['knockout'], function (ko) {
function InfoNotificationViewModel(params) {
this.type = params.type;
this.subject = params.subject;
this.title = params.title;
this.content = params.content;
}
return InfoNotificationViewModel();
});
和一个名为 info.tmpl.html
的 html 模板<div class="notification-container" data-bind="css: type">
<div class="notification-icon"><span class="glyphicon"></span></div>
<div class="notification-content">
<div class="notification-subject" data-bind="text: subject">
</div>
<div class="notification-message">
<p data-bind="text: title"></p>
<p data-bind="text: content"></p>
</div>
</div>
我使用组件绑定将组件添加到我的页面:
<div data-bind="component: {name: 'notification-info', params: {type: 'info', subject: '',title: '', content: ''} }"></div>
稍后这将填充通过 websockets 发送的数据,因此参数将成为可观察的。
谁能告诉我我做错了什么,我认为这与我注册组件的方式有关。
您应该 return 视图模型的构造函数,而不是
return InfoNotificationViewModel();
使用
return InfoNotificationViewModel;
(没有括号)