knockoutjs с использованием шаблона модуля не работает

Question

Я пытаюсь создать простой пример нокаута, используя шаблон модуля

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>

проблема не в том, что я не могу получить пользовательские данные в viewmodel при нажатии кнопки отправки, он возвращает неопределенное значение, а объект входа в систему содержит измененное значение текстового поля, но при нажатии он возвращает черные значения. пожалуйста, дайте мне знать

Также вы можете дать мне знать, как реализовать шаблон описательного модуля в том же коде.

Answer 1

Объект, который вы возвращаете из login.UserVM, имеет только свойство authenticate и не имеет свойств userdata или apiUrl.Таким образом, вместо использования IIFE для создания объекта, установите login.UserVM для функции конструктора, аналогичной login.UserData.А затем используйте new оператор для создания объекта viewModel.Теперь у viewModel будут свойства userdata и apiUrl (удалите return из функции)

Кроме того, вам нужно изменить привязки HTML на: data-bind="value:userdata.UserName".Это ищет свойство userdata внутри границы viewModel

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>