Блог

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

 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, при нажатии кнопки отправки они возвращаются неопределенными, а объект login содержит измененное значение textbox, но при нажатии он возвращает черные значения.
пожалуйста, дайте мне знать

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

Объект, из которого вы возвращаетесь, login.UserVM имеет только authenticate свойство и не имеет свойств userdata или apiUrl . Итак, вместо того, чтобы использовать IIFE для создания объекта, задайте login.UserVM для функции конструктора, подобной login.UserData . А затем используйте new operator для создания объекта 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>