Question

I’m having a difficult time debugging this infinite loop I’ve created. In Knockout.js, I’ve binded a couple elements’ change event using the data-bind="event:{change:save_data}" markup. Then on the save_data function, I have it running an ajax PUT to the server.

var ViewModel = function(config) {
    var self = this;

// initial call to mapping to create the object properties
    ko.mapping.fromJS(config, {}, self);

    self.save_data = function() {
    $('#ajax-console').append('<p>Saving...</p>');          
       $.ajax({
          url: '/echo/json/',
          data: ko.toJS(self),
          type:'put',
          success: function(data) {

            },
          dataType: 'json'
        });
    }

};

Running this and changing either the input or the checkbox gives me the following error in Chrome: RangeError: Maximum call stack size exceeded.

What am I doing wrong? Evidently something in the AJAX call is changing one of the field’s values. A workaround would be to detect if the AJAX call is already in route and not call it, but I’d like to understand what’s going on.

Here are my fiddles:

Broken example:
http://jsfiddle.net/btV9t/10/

Working example:
http://jsfiddle.net/btV9t/8/

Thanks all.

Answer 1

So, when you use the mapping plugin, you need to use it for the toJS calls as well, because it creates a viewmodel that is not compatible with the standard ko.toJS.

your data line needs to look like this:

data: ko.mapping.toJS(self),

Here is the working fiddle