CODEWITHSUNDEEP
javascriptrestbackbone.js
Steve.NayLinAung
Steve.NayLinAung

Reputation: 5155

backbone.js - model.save() generate wrong PUT url path

I hate to ask these strange problems but couldn't able to avoid this one.

I have "Option" view with "Option" model passed as a parameter when creating.

var optionView = new OptionView({ model: option });
this.$el.find('div#optionsBoard').append( optionView.render().el );

In this view, when the user clicks on "Vote" button, the "voteCount" attribute of the model will be incremented.

events: { 'click .button-vote': 'processVote' },

processVote: function (e) {
        var voteCounted = this.model.get('voteCount');
        this.model.set('voteCount', voteCounted++);

        console.log(this.model.id); // has a Id value
        console.log(this.model.isNew()); // false

        this.model.save(); // occurs problem here
        e.preventDefault();
    },

The problem occurs when I save the model back to the server as following:

PUT http://localhost:13791/api/options/ 404 (Not Found)

Yes, this url actually isn't existed on my REST API server. But I believe the correct path of PUT URL to update the model should be as following:

PUT http://localhost:13791/api/options/id_of_the_entity_to_be_updated

When I test this PUT url (http://localhost:13791/api/options/id_of_the_entity_to_be_updated) with Postman Rest client, it works perfectly.

So I think the problem occurs because Backbone model.save() method does not add the id_of_the_entity_to_be_updated to the PUT url.

Please, suggest me something how should I solve this problem.

As additional description, this is my "option" model setup code.

define([
    'backbone'
], function (Backbone) {

    var Option = Backbone.Model.extend({
        idAttribute: "_id",

        defaults: {
            name: '',
            location: '',
            link: '',
            voteCount: 0,
            expiredDate: Date.now(),
            imageName: ''
        },

        url: '/api/options/',

        readFile: function(file) {
            var reader = new FileReader();
            // closure to capture the file information.
            reader.onload = ( function(theFile, that) {
                return function(e) {
                    that.set({filename: theFile.name, data: e.target.result});
                    that.set({imageUrl: theFile.name});
                    console.log(e.target.result);
                };
            })(file, this);

            // Read in the image file as a data URL.
            reader.readAsDataURL(file);
        }
    });

    return Option;

});

Problem found

My bad. In the "Option" model setup, it should be "urlRoot" instead of "url".

Upvotes: 0

Views: 329

Answers (1)

Alexander Shlenchack
Alexander Shlenchack

Reputation: 3869

In your model you should use urlRoot instead url:

urlRoot: '/api/options/'

Upvotes: 1

Related Questions