1

我正在使用 knockout.js 和 twitter bootstrap 的模态插件对用户的电子邮件地址进行数据绑定，以便他们可以通过模态进行更改。但是，当我在模式内的输入框中编辑它时，我希望看到页面上的电子邮件地址同时更新。我的数据绑定有问题吗？

这是下面的jsFiddle：http: //jsfiddle.net/XN58K/1/

var model = {
    "SchoolEmailAddress": "email@domain.com",
    "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

1 回答 1

4

看起来你有一个User没有被使用的构造函数，所以没有一个用户属性是可观察的。

你会想做这样的事情：

viewModel.user(new User(model));

这将通过映射插件发送用户（看起来这在小提琴中没有引用）。

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

这看起来像这个问题的问题。它不会进入“保存/取消”按钮。

于 2012-06-05T00:35:20.267 回答