Knockout js passant la valeur de la zone de texte à viewmodel

Question

J'ai model model et viewmodel et je crée une instance de la classe model. Lorsque je saisis du texte à l'intérieur de la balise d'entrée, la valeur ne passe pas dans le viewmodel, lorsque je clique sur le bouton "enregistrer", j'obtiens un tableau vide.

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

Vous avez lié le click même sur l'élément <input type="button"/> à une fonction saveuserDetail sur la imbriquée curretUser vue-modèle, alors que vous avez réellement situé ce fonctionner sur le parent-modèle userDetails.

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

Modifiez cette liaison à

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

ou la fonction saveuserDetail déménagerais dans la vue modèle curretUser.

En outre, vous devez favoriser la liaison textInput pour les éléments <input/> au lieu de la liaison value. Here is an explanation de la différence.