CODEWITHSUNDEEP
javascriptknockout.js
Sherlock
Sherlock

Reputation: 7597

How to gather Knockout observables to put in JSON?

I really, really don't get it anymore. I'm trying to develop an interface using Knockout, but trying to 'toJSON' it gives me headaches.

The problem is as follows:

I wanna AJAX that to a PHP file receiving the JSON object, but I've got no clue how to proceed from here. I just want a number of observables, not all of them. I also wanna be able to load an initial state FROM an Ajax call (with JSON).

Here are the relevant parts of my code:

    // This only has some observables
    var FormSection = function(number)
    {
        var self = this;
        this.title = ko.observable('Section ' + number);
        this.selectedPageStyle = ko.observable();

    };

    // Only observable / computed
    var Deletion = function(page)
    {
        var self = this;
        // reference to a just deleted page, to make 'undeletion' possible
        this.page = page;
        this.pageTitle = ko.computed(function(){ return self.page.title() });

    };

So far so good, but I've got my ViewModel with some observables, some functionality, etc. This is what I've got so far: (I removed the body of functions for readability)

var FormViewModel = function(data)
{
    var self = this;

    this.pages = ko.observableArray([]);
    this.deletions = ko.observableArray([]);
    this.name  = ko.observable();
    this.description = ko.observable();
    this.availablePageStyles = ko.observableArray(['Header', 'Fields', 'Signatures']);

    this.hasPages = ko.computed(function(){}, this);

    this.numberOfPages = ko.computed(function(){}, this);

    self.selectedPage = ko.observable( );
    self.isPageSelected = function(page) {};
    self.clearPage = function(data, event) {};

    this.save = function() {
        $.ajax("x", {
            // WHAT TO DO?!
            data: { data: ko.toJSON(this)},
            type: "post",
            //success: function(result) { alert(result) },
            error : function(jqXHR, textStatus, errorThrown) { alert(textStatus + errorThrown)}
        });
    };

    $.getJSON("x", function(allData) {
        // How to populate back?!
    });

    this.addPage = function(data, event){}
    this.removePage = function(page){}
    this.unremovePage = function(deletion){}

};

I've got no idea how to proceed if I wanna save the relevant observables. For example: I don't need self.selectedPage. I use that for sorting only.

Upvotes: 0

Views: 188

Answers (1)

Rynan
Rynan

Reputation: 481

To control what is converted to JSON when using ko.toJSON you can overload the function by doing

viewModel.prototype.toJSON = function(){
    var copy = this;
    delete copy.//whatever variables you don't want to return to server here
    //any other variables you want to not return
    return copy;
}

I put together a sample fiddle http://jsfiddle.net/Rynan/hA4Kz/.

For more information and samples see http://www.knockmeout.net/2011/04/controlling-how-object-is-converted-to.html

Upvotes: 3

Related Questions