2012-06-05 3 views
1

knockout.js와 twitter 부트 스트랩의 모달 플러그인을 사용하여 사용자의 이메일 주소를 데이터 바인딩하여 모달을 통해 변경할 수 있습니다. 그러나 모달 내부의 입력 상자에서 편집 할 때 전자 메일 주소가 페이지에서 동시에 업데이트 될 것으로 예상됩니다. 내 데이터 바인딩에 문제가 있습니까?knockout.js 데이터가 모달로 업데이트 될 때 업데이트되지 않습니다.

여기의 jsFiddle의 아래 : http://jsfiddle.net/XN58K/1/

var model = { 
    "SchoolEmailAddress": "[email protected]", 
    "FirstName": "John", 
    "LastName": "Doe", 
    "MiddleName": null, 
    "Id": 3 
}; 

$(document).ready(function() { 
    var viewModel = new AccountSettingsViewModel(); 
    ko.applyBindings(viewModel); 

    viewModel.user(model); 
}); 

function User(data) { 
    var self = this; 
    ko.mapping.fromJS(data, {}, this); 
} 

function AccountSettingsViewModel() { 
    var self = this; 
    this.user = ko.observable(); 

    this.editEmail = function() { 
     $("#editEmailModal").modal("show"); 
    }  
} 

<div data-bind="with: user"> 
    <div>Email Address <a href="javascript:void(0);" data-bind="click: $parent.editEmail">Edit</a></div> 
    <div><label data-bind="text: SchoolEmailAddress"></label></div> 
</div>  
<div id="editEmailModal" class="modal hide fade" data-bind="with: user"> 
     <div class="modal-header"> 
      <a class="close" data-dismiss="modal">×</a> 
      <h3><span class="icon-envelope" style="vertical-align: middle"></span> Edit Your Email Address</h3> 
     </div>   
     <div class="modal-body">    
      <div class="modalRow"> 
       <div class="modalLabel">Email Address:</div>    
       <div><input type="text" data-bind="value: SchoolEmailAddress" class="span4" /></div> 
      </div>      
     </div>  
     <div class="modal-footer"> 
      <a href="javascript:void(0);" class="btn-gray swatch" data-dismiss="modal">Cancel</a> 
      <a href="javascript:void(0);" class="btn-school swatch" data-dismiss="modal">Save Changes</a>   
     </div>   
    </div> 

답변

4

당신이 사용하지 않는 User 생성자 기능이처럼 보이는, 그래서 사용자 속성 중 어느 것도 관찰되지되고있다.

당신은 같은 것을하고 싶은 것 :

viewModel.user(new User(model)); 

이 매핑 플러그인 (바이올린에 언급되지 않은이 모양)를 통해 사용자를 보낼 것입니다. 이 질문에서 문제처럼 보인다

http://jsfiddle.net/rniemeyer/XN58K/2/

. 저장/취소 버튼에 들어 가지 않습니다.

+0

그래, 그게 다야. 감사. –

관련 문제