Knockout js übergibt textbox value to viewmodel

Question

Ich habe Modellklasse und Viewmodel und ich erstelle eine Instanz der Modellklasse.

Wenn ich einen Text innerhalb des Eingabe-Tags eingeben, wird der Wert nicht in das Ansichtsmodell gelangen, wenn ich auf die Schaltfläche "Speichern" klicke, bekomme ich ein leeres Array.

HTML

<div id="UserID"> 
    <lable>UserName</lable> 
    <input type="text" data-bind="value:currentUser().userName" /> 
    <br /> 
    <!--<span data-bind="text:firstName" /><br />--> 
    <label>MobileNumber</label> 
    <input type="text" data-bind="value:currentUser().userMobileNumber" /><br /> 
    <label>Email</label> 
    <input type="text" data-bind="value:currentUser().userEmail" /><br /> 
    <label>Image</label> 
    <input type="text" data-bind="value:currentUser().userImageBase64" /><br /> 
    <label>Image</label> 
    <input type="text" data-bind="value:currentUser().userImageType" /><br /> 
    <label>DeviceUID</label> 
    <input type="text" data-bind="value:currentUser().deviceUId" /><br /> 
    <input type="button" value="save" data-bind="click:currentUser().saveuserDetail" /> 
</div> 

JS

// Model class/// 
var userModel = function() { 
    self = this; 
    self.userName = ko.observable() 
    self.userMobileNumber = ko.observable(); 
    self.userEmail = ko.observable(); 
    self.userImageBase64 = ko.observable(); 
    self.userImageType = ko.observable(); 
    self.deviceUId = ko.observable(); 
} 

//ViewModel// 
var userDetails = function() { 
    self = this; 
    self.currentUser = ko.observable(new userModel()); 
    //ajax post 
    self.saveuserDetail = function() { 
     var model = ko.toJSON(currentUser()); 
     console.log(model); 
     jQuery.support.cors = true; 
     $.ajax({ 
      url: baseurl + 'api/xxxx/xxxxx', 
      type: 'POST', 
      data: model, 
      contentType: 'application/json; charset=utf-8', 
      dataType: 'json', 
      success: function(data) {} 
     }); 
    } 
}; 

$(document).ready(function() { 
    ko.applyBindings(new userDetails()); 
}); 

Answer 1

Sie haben die click sogar auf dem <input type="button"/> Element auf eine saveuserDetail Funktion auf der verschachtelten curretUser View-Modell gebunden, während Sie tatsächlich gefunden haben Funktion auf dem übergeordneten userDetails View-Modell.

<input type="button" value="save" data-bind="click:curretUser().saveuserDetail" /> 

Entweder diese Bindung ändern

<input type="button" value="save" data-bind="click:saveuserDetail" /> 

oder den Standort der saveuserDetail Funktion zum curretUser View-Modell.

Auch sollten Sie die textInput Bindung für <input/> Elemente anstelle der value Bindung bevorzugen. Here is an explanation des Unterschieds.