knockoutjs components params undefined

Question

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.

Answer 1

you should return the constructor for the viewmodel, so instead of

return InfoNotificationViewModel();

use

return InfoNotificationViewModel; (without the parenthesis)