CODEWITHSUNDEEP
javascriptknockout.js
wenbert
wenbert

Reputation: 5303

KnockoutJS: Exclude computed observables before passing data to server

I am not sure what is the best way to do this. But in http://knockoutjs.com/documentation/computedObservables.html there is a section that says "Determining if a property is a computed observable". I used isComputed to check if the property is a computed observable.

I would like to exclude/remove computed observables from self.formItems() before passing the values to my server.

Here is part of my code with the AJAX request to send the data back to the server.

for (var prop in self.formItems()) {
    // console.log(ko.isComputed(self.formItems()[prop].isRadio)); //true (because this is computed)
    // console.log(ko.isComputed(self.formItems()[prop].field_label)); //false (because this is not a computed element)
    for(var form_prop in self.formItems()[prop]) {
        // console.log(form_prop+': '+ko.isComputed(self.formItems()[prop][form_prop]));
        if(self.formItems()[prop].hasOwnProperty(form_prop) && !ko.isComputed(self.formItems()[prop][form_prop])) {
            // result_no_computed_observables[prop][form_prop] = ko.toJS(self.formItems()[prop][form_prop]);
            console.log(self.formItems()[prop][form_prop]);
        }
        // ko.cleanNode(self.formItems()[prop][form_prop])
    }
}

$.ajax({
    'type': 'POST',
    'url': appUrl+'/editors/saveform/'+memberListId+'.json',
    'cache': false,
    'dataType': 'json',
    'contentType': 'application/json',
    'data': ko.toJSON({
        'id': theFormDetails.id(),
        'name': theFormDetails.name(),
        'description': theFormDetails.description(),
        'success_text': theFormDetails.success_text(),
        'success_redirect': theFormDetails.success_redirect(),
        'form_elements': self.formItems()     /* <--- I would like to remove computed observables from this*/
    }),
    'success': function(result) {
        alert('success!!!');
    },
    'statusCode': {
        403: function() {
          alert("Your session has probably expired. Please login again.");
          window.location = appUrl+"/users/login";
        }
    }
});

Any ideas?

Thanks!

Upvotes: 1

Views: 599

Answers (1)

Mike Christensen
Mike Christensen

Reputation: 91628

First off, I'd recommend using the mapping plugin which makes this quite easy. This is an optional plugin you'll need to download and reference. This allows you to pass configuration properties into the serialization and deserialization functions to control exactly what fields get serialized and how. Basically, you'd be able to do something like:

var json = ko.mapping.toJS(model, { ignore: ['form_elements'] });

To exclude the form_elements property from the model.

Another way to do this, without using the plugin, is to override the toJSON method. Something like:

viewModel.prototype.toJSON = function() {
    var copy = ko.toJS(this);
    delete copy.form_elements; // Remove form_elements field
    return copy;
};

Here's an example.

Upvotes: 5

Related Questions