BackboneJS未捕获错误:A" url"必须指定属性或功能

时间:2014-10-16 13:07:30

标签: javascript jquery backbone.js asp.net-web-api

我收到此错误。我能够使用BackboneJs预先形成读取和删除功能,但是当我执行add方法时我遇到错误任何帮助将不胜感激。     JSfiddel路径为http://jsfiddle.net/2wjdcgky/

BackboneJS Uncaught Error: A "url" property or function must be specified 

$(function() {

模型

var modelContact = Backbone.Model.extend({
    defaults: function() {
        return {
            Id: 0,
            Name: "",
            Address: ""
        };
    },
    idAttribute: "Id"
});

ModelCollection

var contactCollection = Backbone.Collection.extend({
    model: modelContact,
    url: function() {
        return 'api/Contact';
    },
    add: function(model) {
        this.sync("create", model); // Error On create
    },
    remove: function(model) {
        this.sync("delete", model); //Runs Fine
    }
});
var contacts = new contactCollection;

查看

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

主视图

var main = Backbone.View.extend({
    el: $("#contactApp"), 
    events: {
        "click #btnsave": "CreateNewContact"
    },
    initialize: function() {
        this.Nameinput = this.$("#contactname");
        this.Addressinput = this.$("#contactaddress");

        contacts.on("add", this.AddContact, this);
        contacts.on("reset", this.AddContacts, this);
        contacts.fetch();
    },
    AddContact: function (contact) {
        console.log("AddContact");
        var view = new contactView({ model: contact });
        this.$("#tblcontact tbody").append(view.render().el);
    },
    AddContacts: function () {
        console.log("AddContacts");
        contacts.each(this.AddContact);
    },
    CreateNewContact: function (e) {
        console.log(e);
        //Generate an error "BackboneJS Uncaught Error: A "url" property or function must be specified"
        contacts.add({ Name: this.Nameinput.val(), Address: this.Addressinput.val() });
    }
});
var m = new main;

});

2 个答案:

答案 0 :(得分:3)

你的JSFiddle缺少Backbone引用和所有。

工作更新:http://jsfiddle.net/apt7hchL/2/

更简单的代码(无需在集合上定义那些addremove方法!)。也是更常见的Javascript编码风格约定。

请注意我必须手动生成" Id"允许创建多个联系人的属性。正如您在默认情况下使Id = 0时,未添加第二个具有相同模型的模型,因为Backbone看到ID = 0的模型已经在集合中。

如果要保存,请调用model.save()方法。不要手动呼叫同步,您通常不需要!

要在将模型添加到集合之前将其保存到数据库,请使用:

createNewContact: function (e) {
  e.preventDefault();
  var self = this;
  var newContact = new ContactModel({                   
    Name: this.$("#name").val(),
    Address: this.$("#address").val()
  });
  newContact.save({ success: function(model){
    self.collection.add(model);
  });

  //clear form
  this.$("#name").val("");
  this.$("#address").val("");

}

答案 1 :(得分:0)

同步方法尝试同步到服务器设置以处理它,具有CRUD功能。如果那不是您想要的,并且您只想在客户端显示此信息,而不是使用同步,则应使用Collection.add(model)和Collection.remove(model)