1

私はknockout.jsとtwitterbootstrapのモーダルプラグインを使用して、ユーザーのメールアドレスをデータバインドし、モーダルを介して変更できるようにしています。ただし、モーダル内の入力ボックス内でメールアドレスを編集しているときに、ページ上で同時にメールアドレスが更新されることを期待しています。データバインディングに問題がありますか？

以下の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 に答える