How to add a slash to PUT rest api request url in js file

Question

I am making a todo app with django restapi and backbone. c, r, d are done but when i am trying to update, PUT request is going without a slash http: //127.0.0.1:8000/api/lists/41 instead of http: //127.0.0.1:8000/api/lists/41/. and i am getting an 500 internal server error.

chrome message :

RuntimeError at /api/lists/41

You called this URL via PUT, but the URL doesn't end in a slash and you have APPEND_SLASH set. Django can't redirect to the slash URL while maintaining PUT data. Change your form to point to 127.0.0.1:8000/api/lists/41/ (note the trailing slash), or set APPEND_SLASH=False in your Django settings.

Request Method: PUT Request URL: http://127.0.0.1:8000/api/lists/41

As per the message if I add APPEND_SLASH = False, all restapi responses are failing.

My scripts.js file:

/**
 * Created by Manoj on 6/29/2016.
 */


var List = Backbone.Model.extend({
    defaults:
    {
        "work": "",
        "done": false
    }
});

var ListsCollections = Backbone.Collection.extend({
      model: List,
      url : "http://127.0.0.1:8000/api/lists/"
});


var ListView = Backbone.View.extend
({
    tagName : "tr",
    listtemplate: _.template($('#list2-template').html()),

    render: function() {
      this.$el.html(this.listtemplate(this.model.attributes));
      //this.$el.html("afsfa");
      return this;
    }
});

var ListsView = Backbone.View.extend({
    el: "#table-body",
    model : ListsCollections,

    // events:{
    //     'click #add': 'addList'
    // },

    initialize : function(){
        $("#table-body").html('');
        this.render();
    },

    render:function(){
        var c = new ListsCollections,i=1;
        self = this;
        c.fetch({
            success : function(){
            self.$el.html('');
                c.each(function(model){
                    var stud_ = new ListView({
                        model : model,
                    });

                    self.$el.append(stud_.render().el);
                });
            }
        });

        //Rendering on to the screen
        return this;
    },

    addList: function (e) {
        e.preventDefault();
        var temp = new Backbone.Collection;
        $("#details").html('<input type="text" id="work_input"/><input type="checkbox" id="done_input"/><input id="clicker" type="submit"/>');
        $("#clicker").click(function(){

            var temp1 = new ListsCollections;
            temp1.create({
                userid: 1,
                work : $("#work_input").val(),
                done : $("#done_input").val()
            });
            $("#details").html('');
            var k = new ListsView;
            k.render();
            parent.location.hash='';
        });
    }
});


//Creating route paths
var myRouter = Backbone.Router.extend({

    routes : {
        "lists/add" : "addList",
        "lists/delete/:id" : "deleteList",
        "lists/update/:id" : "updateList"
    },

    addList : function()
    {
        $("#details").html('<input type="text" id="work_input"/><input type="checkbox" value = "TRUE" id="done_input"/><input id="clicker" type="submit"/>');
        var user = user;
        $("#clicker").click(function(){

            var temp1 = new ListsCollections;
            temp1.create({
                userid: 1,
                work : $("#work_input").val(),
                done  : document.getElementById('done_input').checked
            });
            $("#details").html('');
            var k = new ListsView;
            k.render();
            parent.location.hash='';
        });

    },

    deleteList : function(e){
        var temp = new ListsCollections;
        temp.fetch({
            success : function(){
                temp.findWhere({id : parseInt(e)}).destroy({
                    'success': function () {
                        var k = new ListsView;
                        k.render();
                        parent.location.hash='';
                    }
                });
            }
        })
    },

    updateList : function(eid){
        $("#details").html('<input type="text" id="work_input" value=""/><input type="checkbox" id="done_input"/><input id="clicker" type="submit"/>');
            $("#clicker").click(function(){
                var temp1 = new ListsCollections;
                temp1.fetch({
                    'success' : function()
                    {
                        var tag = temp1.get(parseInt(eid));
                        tag.set({"work" : $("#work_input").val()});
                        tag.set({"done"  : document.getElementById('done_input').checked});
                        tag.save(null,
                            {
                                "success" : function () {
                                $("#details").html('');
                                var k = new ListsView;
                                k.render();
                                parent.location.hash='';
                            }}
                        );

                    }
                })
            });
    },

    updateList2: function (e) {
        $("#details").html('<input type="text" id="work_input" value=""/><input type="checkbox" id="done_input"/><input id="clicker" type="submit"/>');
        $("#clicker").click(function () {

        })
    },
});

var router = new myRouter();
Backbone.history.start();
var app = new ListsView;

Answer 1

Here's a straight-forward solution. Simply create a Backbone Model base class which adds the trailing slash when a specific object is being queried, and derive all of your own models from it. Like this:

var DjangoModel = Backbone.Model.extend({
    // if backbone wants a specific object, append the slash
    url : function() {
        if (this.get('id')) {
            return this.collection.url + this.get('id') + '/';
        }
        else {
            return this.collection.url;
        }
    }
});

I use this solution with the Django Rest Framework in its default configuration, and longer ago also with tastypie. Works like a charm.