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>
그래, 그게 다야. 감사. –