ノックアウトjsは、テキストボックス値をviewmodelに渡します。

Question

モデルクラスとビューモデルがあり、モデルクラスのインスタンスを作成しています。

入力タグの中にテキストを入力すると、値がビューモデルに入りません。「保存」ボタンをクリックすると空の配列が表示されます。

あなたが実際にこれを設置しましたのに対し、あなたは、ネストされたcurretUserビューモデルにsaveuserDetail関数に<input type="button"/>要素にclickにも束縛しまし

// 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

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親のuserDetailsビューモデルの関数です。

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

いずれ

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

に結合、これを変更したり、curretUserビューモデルにsaveuserDetail機能を変えます。

valueバインディングの代わりに、<input/>要素のバインディングを使用することをお勧めします。その差のHere is an explanation。