Backbone.js - guidance on working with rails and nested collections

Question

I'm using codebrew\\backbone-rails in a nested model example (say I have a collection of Tasks, and each can have a collection of Details - similar to the example.)

I can load and create a series of nested views to display the data I want, but now I'm stuck when trying to perform CRUD operations on that data.

For example - say I change an attribute on my outer(upper?) object, and want to send that data to the server. Here's what that json looks like. Since I "eagerly" loaded my nested data when I loaded the app, I'm going to send it back to the server on an update (look at details_attributes format) :

{
    "task" => {
                      "name" => "testupdate",
                   "user_id" => 1,
                        "id" => 3,
                   "Details" => [
            [0] {
                        "task_id" => 3,
                   "break_length" => 4,
                      "completed" => false,
                             "id" => 12,
                         "length" => 25,
                    "location_id" => nil,
                           "note" => "test444",
                "start_date_time" => "2011-12-15T00:00:00Z"
            }
        ],
        "details_attributes" => [
            [0] {
                "start_date_time" => "2011-12-15T00:00:00Z",
                      "completed" => false,
                           "note" => "test444",
                   "break_length" => 4,
                        "task_id" => 3,
                             "id" => 12,
                         "length" => 25,
                    "location_id" => nil
            }
        ]
    }
}

FYI - I've overridden the Task toJSON method to decorate the collection with "_attributes" that Rails expects

On the other hand, if I performed this change on the server, the old-fashioned rails way (using a nested form), I send a hash of nested objects (although there's only one in this example (look at Details_attributes):

{
                  "utf8" => "",
    "authenticity_token" => "iv9wYvgqLt3nldVOX4AeAifpFaSHIfEj85MsPUaMiAw=",
                  "task" => {
                      "name" => "test",
        "details_attributes" => {
            "0" => {
                       "_destroy" => "",
                "start_date_time" => "2011-12-15 00:00:00",
                         "length" => "25",
                      "completed" => "0",
                           "note" => "test444",
                   "break_length" => "4",
                             "id" => "12"
            }
        }
    },
                "commit" => "Update task",
               "user_id" => "1",
                    "id" => "3"
}

any guidance on how to get my json, on an update, to look like it should for the server to accept it?

Thanks for any help.

Answer 1

You could provide a custom sync method to override the default serialization. For example (I hope I'm not too far from your setup)

var json='{"name":"testupdate", "user_id":1, "id":3,  "details_attributes":[{"start_date_time":"2011-12-15T00:00:00Z", "completed":false, "note":"test444", "break_length":4, "task_id":3, "id":12, "length":25}]}';

Task = Backbone.Model.extend({
    initialize:function() {
        this.attrs=new DetailsAttributes(this.get("details_attributes"));
    },
    sync: function(method, model, options) {
        if (method == 'update') {
            var data = this.toJSON();
            data.details_attributes = {};
            this.attrs.each(function(model, ix) {
                data.details_attributes[ix] = model.toJSON();
            });

            console.log(JSON.stringify(data));

            options = _.extend({data: data}, options);
        }


        return Backbone.sync.call(this, method, this, options);
    }
});
DetailAttribute= Backbone.Model.extend();
DetailsAttributes= Backbone.Collection.extend({
    model:DetailAttribute
});
var tk= new Task(JSON.parse(json));
tk.save();

http://jsfiddle.net/5gZr5/4/ if you want to check the console log.

Backbone.sync will use the data attribute passed in the options for its serialization.