javascript - 使用模块模式的 knockoutjs 不起作用

Question

我正在尝试使用模块模式创建简单的 knockout 示例

var login = {}; //login namespace

//Constructor
login.UserData = function () {
    var self = this;
    self.UserName = ko.observable("");
    self.Password = ko.observable("");
};
//View-Model
login.UserVM = function () {
    this.userdata = new login.UserData(),
    this.apiUrl = 'http://localhost:9090/',
    this.authenticate = function () {
        var data = JSON.parse(ko.toJSON(this.userdata));
        var service = apiUrl + '/api/Cryptography/Encrypt';
        DBconnection.fetchdata('POST', service, JSON.stringify(data.Password), response, function () { console.log('Cannot fetch data') }, null, true);
        function response(res) {
            console.log(res)
        }
    }
    return {
        authenticate: this.authenticate
    }
}();

$(function () {
    ko.applyBindings(login.UserVM); /* Apply the Knockout Bindings */
});

HTML 代码:

<form id="loginform" name="loginForm" method="POST">
    <div id="form-root">
        <div>
            <label class="form-label">User Name:</label>
            <input type="text" id="txtFirstName" name="txtFirstName" data-bind="value:login.UserData.UserName" />
        </div>
        <div>
            <label class="form-label">Password:</label>
            <input type="text" id="txtLastName" name="txtLastName" data-bind="value:login.UserData.Password" />
        </div>
        <div>
            <input type="button" id="btnSubmit" value="Submit" data-bind="click: authenticate" />                
        </div>
    </div>
</form>

问题是在单击提交时无法在 View 模型中获取用户数据，它返回未定义，登录对象保存文本框的更改值，但在单击时返回黑色值。请告诉我

你也可以让我知道如何在相同的代码中实现定义模块模式。

Answer 1

您从 login.UserVM 返回的对象只有 authenticate 属性，没有 userdata 或 apiUrl属性。所以，而不是使用 IIFE要创建对象，请将 login.UserVM 设置为类似于 login.UserData 的构造函数。然后使用 new operator创建 viewModel 对象。现在 viewModel 将具有 userdata 和 apiUrl 属性(从函数中删除 return)

此外，您需要将 HTML 绑定(bind)更改为:data-bind="value:userdata.UserName"。这会在绑定(bind)的 viewModel

中查找 userdata 属性

var login = {}; //login namespace

//Constructor
login.UserData = function () {
    var self = this;
    self.UserName = ko.observable("");
    self.Password = ko.observable("");
};
//View-Model
login.UserVM = function () {
    this.userdata = new login.UserData(),
    this.apiUrl = 'http://localhost:9090/',
    this.authenticate = function () {
        var data = JSON.parse(ko.toJSON(this.userdata));
        console.log(data)
        //var service = this.apiUrl + '/api/Cryptography/Encrypt';
        //DBconnection.fetchdata('POST', service, JSON.stringify(data.Password), response, function () { console.log('Cannot fetch data') }, null, true);
        function response(res) {
            console.log(res)
        }
    }
}; // remove the () from here

ko.applyBindings(new login.UserVM()); /* Apply the Knockout Bindings */

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<form id="loginform" name="loginForm" method="POST">
    <div id="form-root">
        <div>
            <label class="form-label">User Name:</label>
            <input type="text" id="txtFirstName" name="txtFirstName" data-bind="value:userdata.UserName" />
        </div>
        <div>
            <label class="form-label">Password:</label>
            <input type="text" id="txtLastName" name="txtLastName" data-bind="value:userdata.Password" />
        </div>
        <div>
            <input type="button" id="btnSubmit" value="Submit" data-bind="click: authenticate" />        
        </div>
    </div>
</form>