Can't get multiple viewmodels under master viewmodel work in Durandal.JS - durandal

Question

I am working on an application which has DurandalJS 2.0.1. I have written a viewmodel, basically I want to implement a master viewmodel that has multiple viewmodels (e.g. account viewmodel has register and login sub viewmodels)
define(['knockout'],function (ko) {
var register = function(){
var self = this;
self.Welcome = "Register";
self.Username = ko.observable();
self.Password = ko.observable();
}
var login= function(){
var self = this;
self.Welcome = "Login";
self.Username = ko.observable();
self.Password = ko.observable();
}
var account = {
testVariable : "Hello Cruel World!",
register : register,
login : login
};
return account;
});
View is :
<h2 data-bind="text: testVariable"></h2>
<h2 data-bind = "text: register().Welcome"></h2>
<h2 data-bind = "text: login().Welcome"></h2>
testVariable is being displayed correctly but I can't make register().Welcome, login().Welcome or tried register.Welcome or login.Welcome working.
Any idea how can I get it working?

Answer 1

Here's how you can tackle such situations... #robert.westerlund is right, if that is function then you've to create new object of each function before proceeding..
define(['plugins/http', 'durandal/app', 'jquery', 'knockout'], function (http, app, $, ko) {
var loginVM = {
Welcome : "Hello Login",
Username : ko.observable(),
Password : ko.observable(),
rememberMe : ko.observable(false),
Login : function (obj, event) {
//Do the login stuff
}
};
var registerVM = {
Welcome : "Hello Register",
Username : ko.observable(),
Password : ko.observable(),
ConfirmPassword : ko.observable(),
Register : function (obj, event) {
//Do the register stuff
}
};
return {
login : loginVM,
register: registerVM
};
});
VIEW
<div data-bind="with:login">
<h2 data-bind = "text: Welcome"></h2>
</div>
<div data-bind="with:register">
<h2 data-bind = "text: Welcome"></h2>
</div>
Instead of writing functions, I wrote object literals. That worked pretty well :-)