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 plete 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

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 plete 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

• javascript
• backbone.js

Share Improve this question Follow asked Mar 7, 2012 at 6:45 Nick JosevskiNick Josevski 4,22644 gold badges4545 silver badges6464 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 3

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});