So fügen Sie einen Schrägstrich zu PUT Rest API-Anfrage URL in Js-Datei

Question

Ich mache eine Todo-App mit Django Restapi und Backbone. c, r, d sind fertig, aber wenn ich versuche zu aktualisieren, geht die PUT-Anfrage ohne einen Schrägstrich http: //127.0.0.1:8000/api/lists/41 statt http: //127.0.0.1:8000/api/lists/41/. und ich bekomme eine 500 internal server error.

Chrom Nachricht:

Runtime bei/api/lists/41

Sie nannten diese URL via PUT, aber die URL nicht in einem Schrägstrich und Sie haben APPEND_SLASH Set. Django kann nicht auf die Schrägstrich-URL umleiten, während PUT-Daten beibehalten werden. Ändere dein Formular so, dass es auf 127.0.0.1:8000/api/lists/41/ zeigt (beachte den Schrägstrich), oder setze APPEND_SLASH = False in deinen Django-Einstellungen.

anfordern Methode: PUT Anforderungs-URL: http://127.0.0.1:8000/api/lists/41

Gemäß der Nachricht, wenn ich APPEND_SLASH = False alle restapi Antworten hinzufügen versagen.

Meine scripts.js Datei:

/** 
* 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

hier ein Straight-Forward-Lösung ist. Erstellen Sie einfach eine Backbone-Modell-Basisklasse, die den abschließenden Schrägstrich hinzufügt, wenn ein bestimmtes Objekt abgefragt wird, und leiten Sie alle Ihre eigenen Modelle daraus ab. Wie folgt aus:

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

verwende ich diese Lösung mit dem Django-Framework Erholung in der Standardkonfiguration und länger vor auch mit tastypie. Klappt wunderbar.

Answer 2

Entfernen Sie den Schrägstrich von ListsCollections

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