Question

我正在使用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>

Answer 1

看起来您有一个未使用的User构造函数，因此没有任何用户属性可供观察。

您可能希望执行以下操作：

viewModel.user(new User(model));

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

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

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

在模态中更新时，页面上的knockout.js数据未更新

1 个答案: