CODEWITHSUNDEEP
data-bindingknockout.jsmodal-dialog
Adam Levitt
Adam Levitt

Reputation: 10476

knockout.js data on page not updating when updated in modal

I'm using knockout.js and twitter bootstrap's modal plugin to data-bind the user's email address so they can change it via the modal. However, I'm expecting the see the email address simultaneously update on the page when I'm editing it inside the input box inside the modal. Is something wrong with my data-binding?

Here's the jsFiddle of the below: 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>

Upvotes: 1

Views: 1576

Answers (1)

RP Niemeyer
RP Niemeyer

Reputation: 114792

It looks like you have a User constructor function that is not being used, so none of the user properties are being made observable.

You would want to do something like:

viewModel.user(new User(model));

This would send the user through the mapping plugin (looks like this was not referenced in the fiddle).

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

That looks like the issue from this question. It does not get into the Save/Cancel button.

Upvotes: 4

Related Questions