넉 아웃 : 편집 된 입력 필드가 업데이트되지 않았습니다.

Question

부트 스트랩 대화 상자에 세부 정보가 표시된 사용자 목록이 있습니다. 목록이 제대로 채워지고 세부 정보가 모달로 올바르게 표시됩니다. 그러나 하나 이상의 입력 필드를 업데이트하고 대화 상자를 닫고 다른 사용자의 세부 정보를 열면 두 번째 사용자 값 대신 편집 된 값이 표시됩니다. 편집하지 않고 세부 사항을 열면 항상 올바른 값이 표시됩니다.

문제점 : 입력 필드를 편집하는 경우 선택한 사용자 (상세히 표시)를 덮어 쓰지 않습니다.

뷰 모델 :

function UserViewModel() { 
    // init 
    var self = this; 
    self.userList = ko.observableArray([]); 
    self.selectedUser = ko.observable([]); 
    self.availableGroups = ko.observableArray([]); 
    self.errors = ko.observableArray([]); 

    self.loadUserList = function() { 
     $.ajax({ 
      type : "POST", 
      url : "/user/loadUserList.htm", 
      success : function(response) { 
       var parsedJSON = $.parseJSON(response); 
       self.userList(ko.mapping.fromJS(parsedJSON)); 
      }, 
     }); 
    } 

    self.loadUserDetail = function(user) { 
     // Set selected user 
     self.selectedUser(ko.mapping.fromJS(user)); 

     // Load available groups 
     $.ajax({ 
      type : "POST", 
      url : "/user/loadAvailableGroups.htm", 
      success : function(response) { 
       var parsedJSON = $.parseJSON(response); 
       self.availableGroups(ko.mapping.fromJS(parsedJSON)); 

       registerClickListener(); 
       initOrdinaryTooltips(); 
       $("#user-dialog").modal('show'); 
      }, 
     }); 
    } 

    self.addUser = function() { 
     self.loadUserDetail(ko.observable([])); 
     $("#user-dialog").modal('show'); 
    } 

    self.saveUser = function() { 
     // select all assigned groups 
     $('#assigned-select option').prop('selected', true); 

     var formJson = $("#user-form").serializeArray(); 
     $.ajax({ 
      type : "POST", 
      url : "/user/saveUser.htm", 
      data: formJson, 
      success : function(response) { 
       var parsedJSON = $.parseJSON(response); 
       if(parsedJSON.errors.length == 0){ 
        $("#user-dialog").modal('hide'); 
       } else { 
        initErrorTooltips(); 
       } 
      }, 
      error : function(e) { 
       showErrorBox('Error: ' + e.status); 
      } 
     }); 
    } 

    self.cancel = function() { 
     $("#user-dialog").modal('hide'); 
    } 
} 

HTML :

<div class="form-group has-warning"> 
    <label class="control-label"><spring:message code="masterdata.user.firstName" /></label> 
    <input type="text" class="form-control input-sm" data-bind='attr:{value: selectedUser().firstName}' name="user.firstName" /> 
    <!-- ko foreach: errors() --> 
     <!-- ko if: key === 'user.firstName' --> 
      <span data-bind='text: value' class="spring-error fa fa-lg fa-exclamation-circle"></span> 
     <!-- /ko --> 
    <!-- /ko --> 
</div> 

Answer 1

html로하면 모달 열고 무엇을 이전과 이후에 발생하는 방법을 표시하지 않습니다 제공 니펫을. 그러나 양식 요소에 attr 바인딩 대신 value binding을 사용하는 것이 좋습니다.