Javascript BackBoneJs不会将模型删除/更新到服务器

我有一个读取/创建/更新模型并将其保存到服务器的应用程序。但目前我能够从数据库中读取和保存我的模型。但我无法从服务器中删除/更新模型。当前删除模型的视图，但不删除其自身的模型 这里是JSFiddle路径

型号

    var modelContact = Backbone.Model.extend({
    defaults: function() {
        return {
            Id: 0,
            Name: "",
            Address: ""
        };
    }, 
    //if i add this idAttribute = "Id" it deletes the value from the server 
    //but i am unable to create a new model/new entry to the database
    clear: function () {
        // Deletes the model but the changes are not posted back to the server
        this.destroy(); 
    }
});

收藏

// runs fine
var contactCollection = Backbone.Collection.extend({
    model: modelContact,
    url: 'api/Contact'
});

var contacts = new contactCollection;

模型视图

var contactView = Backbone.View.extend({
    tagName: "tr",
    events: { // runs fine
        "click a.destroy": "clear"
    },
    template: _.template($("#newContacttemplate").html()), // runs fine
    initialize: function() {
        this.model.on("change", this.render, this);
        this.model.on('destroy', this.remove, this);
    },
    render: function() { // runs fine
        this.$el.html(this.template(this.model.toJSON()));
        return this;
    },
    clear: function () {
        this.model.clear();
    }
});

var main = Backbone.View.extend({
    el: $("#contactApp"),
    events: { // runs fine
        "click #btnsave": "CreateNewContact"
    },
    initialize: function() { // runs fine
        this.Nameinput = this.$("#contactname");
        this.Addressinput = this.$("#contactaddress");
        contacts.on("add", this.AddContact, this);
        contacts.on("reset", this.AddContacts, this);
        contacts.fetch(); // Note : populates all the database values
    },
    AddContact: function(contact) { // runs fine
        var view = new contactView({ model: contact });
        this.$("#tblcontact tbody").append(view.render().el);
    },
    AddContacts: function() { // runs fine
        contacts.each(this.AddContact);
    },
    CreateNewContact: function(e) { // runs fine
        contacts.create({ Name: this.Nameinput.val(), Address: this.Addressinput.val() });
    }
});
var m = new main;

MainView

var contactView = Backbone.View.extend({
    tagName: "tr",
    events: { // runs fine
        "click a.destroy": "clear"
    },
    template: _.template($("#newContacttemplate").html()), // runs fine
    initialize: function() {
        this.model.on("change", this.render, this);
        this.model.on('destroy', this.remove, this);
    },
    render: function() { // runs fine
        this.$el.html(this.template(this.model.toJSON()));
        return this;
    },
    clear: function () {
        this.model.clear();
    }
});

var main = Backbone.View.extend({
    el: $("#contactApp"),
    events: { // runs fine
        "click #btnsave": "CreateNewContact"
    },
    initialize: function() { // runs fine
        this.Nameinput = this.$("#contactname");
        this.Addressinput = this.$("#contactaddress");
        contacts.on("add", this.AddContact, this);
        contacts.on("reset", this.AddContacts, this);
        contacts.fetch(); // Note : populates all the database values
    },
    AddContact: function(contact) { // runs fine
        var view = new contactView({ model: contact });
        this.$("#tblcontact tbody").append(view.render().el);
    },
    AddContacts: function() { // runs fine
        contacts.each(this.AddContact);
    },
    CreateNewContact: function(e) { // runs fine
        contacts.create({ Name: this.Nameinput.val(), Address: this.Addressinput.val() });
    }
});
var m = new main;

---

}))

现在您在

主干.Collection

上定义了

URL

，但在

主干.Model

上没有定义，这意味着您必须通过

集合执行所有AJAX工作。但不必如此：您可以在服务器端为
Model
AJAX操作添加第二个URL，或者二者甚至可以共享一个URL（如果您进行了适当的设置）

重要的部分，如果您希望能够调用
this.destroy（）
并将其反映到您的服务器上，您需要：

服务器上可以使用DELETE方法处理请求的URL（与常用的GET或POST方法相比）
设置为该服务器端url的
Backbone.Model
上的
url
属性
一旦调用了
this.destroy（）
将创建一个删除AJAX请求，您的服务器将收到该请求，并知道它应该删除相应的数据库记录，然后该模型将在客户端和服务器端被删除。
我已在我的模型url上添加了此项：“api/Contact”，但它仍然不会反映回服务器。我有这个方法签名，可以处理集合和模型“public HttpResponseMessage delete（int-Id）”中的删除请求。请尝试打开浏览器开发人员工具（如Chrome开发人员工具、Firebug等），然后打开Net选项卡。然后尝试触发一个
destroy
，并查看Net选项卡中是否出现针对
destroy
的AJAX请求。如果没有，则表示主干网有问题，如果服务器有问题（在这种情况下，您可能希望查看请求本身，看看它是否符合服务器的预期）。