Question

I am pulling my hair out!! I have read all of the examples, tutorials, etc. and others make this seem very simple, but I am new to Knockout and can’t get this to work.

I have a user profile form that I want to bind values of from a jquery ajax request. Essentially I want to be able to pull a profile from the server and load any previously saved data into the form values. I am able to request the JSON from an API and load the values into the form (I pre-populated the profile in the database ) using the mapping plugin.

$.getJSON("api/profile/" + "<?php echo $_SESSION['id']; ?>",function(json){

    var viewModel = ko.mapping.fromJS(json);     
    ko.applyBindings(viewModel);  

}); 

This works fine. The issues I’m having is on the posting side. If a user fills out the form for the first time and clicks the save button all of the values post back to the server in JSON – BUT – if you change only one field and then save again, ONLY the value that was changed gets posted and all of the other values post as null

The view model I am using (I have tried this with, ko.observalbe(), with “” values, etc!)

viewModel ={}

Here is my save call:

viewModel.save = function(){

              $.ajax({
                   url:"api/profile/" + "<?php echo $_SESSION['id']; ?>",
                   contentType: 'application/json',
                   data: ko.mapping.toJSON(viewModel),
                   type: "POST",
                   dataType: 'json',
                   success: function(data) {

                        alert("What's UP!");

                        alert(data)

                    },
                    error: function (data) { alert("error" + data); }
                    });
        }  

I know it has to do with the “data” line in the save and how Knockout binds to the values, but for the life of me I can’t figure it out. Any assistance would be most appreciated!

This is the final code that finally works for those searching:

<script type="text/javascript">

        var viewModel;

        function callback(data) {
            if (viewModel) {
                // model was initialized, update it
                ko.mapping.fromJS(data, viewModel); 
            } else {
                // or initialize and bind
                viewModel = ko.mapping.fromJS(data);
                ko.applyBindings(viewModel);
            }
        }

    save = function() {

             $.ajax({
                    url:"api/profile/" + "<?php echo $_SESSION['id']; ?>",
                    contentType: 'application/json',
                    data: ko.mapping.toJSON(viewModel),
                    type: "POST",
                    dataType: 'json',
                    success: function(data) {

                   alert( ko.mapping.toJSON(viewModel));    
                    },
                    error: function (data) { alert("error" + data); }
                    });
        }        


    $.ajax({
                url: "api/profile/" + "<?php echo $_SESSION['id']; ?>",
                contentType: 'application/json',
                type: "GET",
                dataType: 'json',
                success: function(data) {
                 callback(data);         


                }       
        });


  </script>

Answer 1

When I use knockout mapping plugin, I always create variable (can be global or in any application namespace) and initialize the model only once, and all the rest of the ajax requests just update the model, probably you are missing the update step.

Here is the code below (javascript code is simplified, of course):

var model; // it is undefined, I just need to have the way to find whether the model was initialized or not
function callback(data) {
    if (model) {
        // model was initialized, update it
        ko.mapping.fromJS(data, model); 
    } else {
        // or initialize and bind
        model = ko.mapping.fromJS(data);
        ko.applyBindings(model);
    }
}

// do ajax request and call callback(data) on success callback

Has it helped you to solve your problem?