I am creating a Knockout js components to use in my notification system. When I add a component to the page I get a params is undefined message, it looks like my params object is not send to the constructor of the viewmodel.
At first I thought my component loader was the problem, so I registered the component manually like so:
ko.components.register('notification-info', {
viewModel: { require: "/notifications/info" },
template: { require: "text!/notifications/info.tmpl.html"}
});
The component consist of a js file called info.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();
});
and an html template called info.tmpl.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>
I add the component to my page using the component binding:
<div data-bind="component: {name: 'notification-info', params: {type: 'info', subject: '',title: '', content: ''} }"></div>
Later this will be filled with data send over websockets so params will become an observable.
Can someone please tell me what I'm doing wrong here, I think it has something to do with the way I register the component.
you should return the constructor for the viewmodel, so instead of
return InfoNotificationViewModel();
use
return InfoNotificationViewModel;
(without the parenthesis)