CODEWITHSUNDEEP
backbone.js
styler
styler

Reputation: 16481

Backbone how to make a different GET and POST request in the model?

I have a team view and a team model, when I instantiate the team view I need to request a list of teams objects to be used in templating a teams select box using /teams, I'm wondering how I do this as I'm not sure where this actual request should go? Can I GET from one URL then POST to another in the model? Here are some snippets of code:

Country JSON

/teams

[
    {
        "name": "Arsenal",
        "nickname": "Gunners"
    },
    {
        "name": "Manchester United",
        "nickname": "Red Devils",
    }
]

Team Model

module.exports = Backbone.Model.extend({

    url: '/team'

    defaults: {
        'name': '',
        'badge': '',
        'nickname': '',
        'city': ''
    },

    initialize: function() {

    },

    validate: function() {

    }
});

Making my new view

var teamView = new TeamView({
  model: new TeamModel() // but where does my teams request go?
});

Upvotes: 0

Views: 222

Answers (1)

tacos_tacos_tacos
tacos_tacos_tacos

Reputation: 10575

In Backbone, let's say you have a model type.

var MyModel = Backbone.Model.extend({ ... });

One of the properties of the type is the url and another is id, which is the id on the server.

var MyModel = Backbone.Model.extend({
    url: function() { return '/api/item/' + this.get('id'); }
})

When you want to GET a model for which you've defined the URL, you call fetch:

var MyModel = Backbone.Model.extend({ ... });
var model = new MyModel();

Before the fetch your model has no id so it is considered a "new" model. After the fetch your model has an id so it is considered an "existing" model.

When you want to either create or update changes to a model, you call save. If it is new, it will do POST model.url(); if update, PUT model.url():

var MyModel = Backbone.Model.extend({ ... });
var model = new MyModel();
model.set('somethingToSave','theValueToSaveToServer');
model.save();

When it is done saving, it will go to the sync event handler.

var MyModel = Backbone.Model.extend({
              ...
              sync: function() { alert('yay!); }
              });
var model = new MyModel();
model.listenTo('sync','onSync',this);
model.set('somethingToSave','theValueToSaveToServer');
model.save(); // finishes with onSync

And if you want to control it more carefully, you can call it like so...

model.save({
    keyA: this.get('keyA'),
    keyB: this.get('keyB')...
}, {
    success: function() { alert('success'); },
    error: function() { alert('error'); }
});

Edit

In your comment, you asked:

"where can I request the /teams since that is a different restful url compared to the /team url I'll be using to post my team data?"

Yes, I should have read your question more carefully.

The easiest way to do this would be to set the url explicitly in one of the calls, either fetch or save/sync.

model.url = function() {
    var suffix = '/' + this.id || ''; 
    return '/teams' + suffix; 
};
model.savingUrl = function() { return '/team'; };

model.save({
    a: this.get('a'),
    b: this.get('b')
}, {
    url: function() { return this.savingUrl(); },
   ...
});

Upvotes: 1

Related Questions