Question

I thought I had the Model, ModelView, Collection, AppView sample on github/documentcloud/backbone reasonably understood, until..

I tried to set up something that is more cut-down. I’m trying to just have a Model and a View.

My issue

The post of data does not work; the request payload in the network trace is empty, what have I missed?

I have the complete code up on jsFiddle here (A). I also tested that the sample code that works in my enviroment also works in on jsFiddle (B) and network inspection shows that the request payload has data.

Model and View code

window.MyModel = Backbone.Model.extend({
    urlRoot: '/api/m',
});

window.MView = Backbone.View.extend({
    template: _.template($('#template').html()),
    el: $('#modelfields'),

    initialize: function () { this.model.bind('change', this.render, this); },

    events: {
        "click .save": function () { this.model.save(); }
    },
    render: function () { 
        $(this.el).html(this.template(this.model.toJSON()));
        return this;
    },
});

window.MyMView = new MView({model: new MyModel});

Network window screen shots

• (A) Response data empty on my sample
• (B) The official demo works fine

Answer 1

Your model has no properties! Set some defaults or call this.model.set({..}) to add them.

I’ve updated your example to include a default value and the fields from the form.

window.MyModel = Backbone.Model.extend({
    defaults: {
        'defaultvalue':'somedefault'                                     
    },
    urlRoot: '/api/m',
});

window.MView = Backbone.View.extend({
    template: _.template($('#template').html()),
    el: $('#modelfields'),

    initialize: function () { this.model.bind('change', this.render, this); },

    events: {
        "click .save": 'save'
    },
    save: function() {
        var description = this.$("#Description").val();
        var moreData = this.$("#MoreData").val();
        this.model.set({"description":description,"more":moreData});
        this.model.save();            
    },
    render: function () { 
        $(this.el).html(this.template(this.model.toJSON()));
        return this;
    },
});

window.MyMView = new MView({model: new MyModel});