在 Durandal.JS 的主视图模型工作下无法获得多个视图模型答案

【问题标题】：Can't get multiple viewmodels under master viewmodel work in Durandal.JS在 Durandal.JS 的主视图模型工作下无法获得多个视图模型
【发布时间】：2014-05-23 13:36:14
【问题描述】：

我正在开发一个具有 DurandalJS 2.0.1 的应用程序。我写了一个viewmodel，基本上我想实现一个有多个viewmodel的主viewmodel（例如帐户viewmodel有注册和登录子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;

});

视图是：

<h2 data-bind="text: testVariable"></h2>
<h2 data-bind = "text: register().Welcome"></h2>
<h2 data-bind = "text: login().Welcome"></h2>

testVariable 显示正确，但我无法使 register().Welcome、login().Welcome 或尝试 register.Welcome 或 login.Welcome 工作。

知道如何让它工作吗？

【问题讨论】：

您已将login 和register 方法编写为构造函数，因此您需要执行new login() 和new register()。我建议在创建 account 视图模型时立即执行此操作，而不是在绑定中执行此操作（这可能会给您带来其他长度问题）。
谢谢伙计，我已经设法用几乎没有什么不同的方法找到了我自己的问题的答案，但它有效:-) 我会自己在这里发布..

标签： durandal durandal-2.0

【解决方案1】：

以下是您如何处理此类情况...@robert.westerlund 是对的，如果这是函数，那么您必须在继续之前为每个函数创建新对象..

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
    };


});

查看

<div data-bind="with:login">
     <h2 data-bind = "text: Welcome"></h2>
</div>
<div data-bind="with:register">
     <h2 data-bind = "text: Welcome"></h2>
</div>

我没有写函数，而是写了对象字面量。效果很好:-)

【讨论】：