텍스트 상자 값을 viewmodel에 넘기는 jock

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/> 요소에 대한 textInput 바인딩을 선호해야합니다. 그 차이는 Here is an explanation입니다.