淘汰js將文本框值傳遞給viewmodel

Question

我有模型類和viewmodel，我正在創建模型類的一個實例。

當我在輸入標籤內輸入一些文本時，值不會進入viewmodel，當我點擊「保存」按鈕時，我得到一個空數組。

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

你已經綁定的click甚至<input type="button"/>元素的saveuserDetail功能上嵌套curretUser視圖模型，而你實際上已經位於此功能在父userDetails視圖模型。

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

要麼改變此結合

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

或重新定位saveuserDetail功能到curretUser視圖模型。

此外，您應該支持textInput綁定<input/>元素而不是value綁定。 Here is an explanation的區別。