Javascript backbonejs路由器出现问题

场景

我正在开发主干应用程序。现在发生的事情是，当用户单击页面上的编辑链接时，它应该会显示一个表单。我尝试使用主干路由器而不是事件来实现这一点。对于事件对象，它工作得非常好。要使用路由器，我使用全局事件

问题

问题是，当用户单击编辑链接时，它会在控制台中显示以下错误

Uncaught TypeError: Object 10 has no method 'toJSON'             views.js:57

这个错误是因为在views.js的第57行，我使用的是

This.model.toJSON（）

，而不是通过路由器传递模型。我不知道如何通过路由器传递模型

这是我的路由器注意：以下所有代码都在单独的文件中

App.Router = Backbone.Router.extend({
    routes: {
        'contacts/:id/edit': 'editContact'
    },

    editContact: function (id) {
        console.log('yahhhhh');
        vent.trigger('contact:edit', id);
    }
});

在上面的路由器中，我触发了

editContact

功能中的一个事件。然后我在下面的

initialize

函数中收听上述事件

App.Views.App = Backbone.View.extend({
    initialize: function () {
        vent.on('contact:edit', this.editContact, this);
    },

    editContact: function (contact) {
        var editContactView = new App.Views.EditContact({ model: contact });
        $('#editContact').html(editContactView.render().el);
    }
});

现在，在上面的

函数中，在
初始化
函数中收听了
事件
之后，我正在调用
editContact
函数，并且我还在使用
此
关键字传递
模型
。在
editContact
函数中，我正在创建一个
editContact
的实例，下面是视图，然后呈现一个需要显示的表单

App.Views.EditContact = Backbone.View.extend({
    template: template('editContactTemplate'),

    render: function () {
        var html = this.template(this.model.toJSON());  //<--- this is line 57
        this.$el.html(html);
        return this;
    }
});

在
editContact
方法中，参数
contact
指的是从路由器向前传递的
id
。当您使用
new App.Views.EditContact（{model:contact}）
初始化新视图时，视图的模型应该是id

您需要将id映射到模型实例中。我认为正确的位置是在路由器中：

editContact: function (id) {
    var contact = new App.Models.Contact({id:id});
    vent.trigger('contact:edit', contact);
}

请注意，此时模型将仅设置
id
属性。如果需要填充模型属性进行编辑，则应从服务器中获取模型，然后触发事件：

editContact: function (id) {
    var contact = new App.Models.Contact({id:id});
    contact.fetch().done(function() {
      vent.trigger('contact:edit', contact);
    });
}

根据评论编辑：一般来说，您不应该将任何内容传递给路由器。路由器应该是每个新请求（url更改）的起点。如果希望在页面更改之间保持某种状态，则应将数据存储在路由器级别，并从视图中“向下”传递模型和集合

在一个简化的场景中，这意味着在路由器中初始化并存储对集合的引用。比如：

var Router = Backbone.Router.extend({
  initialize: function() {
    this.contactCollection = new App.Collections.Contacts();
  },

  editContact: function (id) {
    id = parseInt(id, 10);
    if(_.isNaN(id)) {
      //error...
    }
    //try to get a model from the collection
    var contact = this.contactCollection.get(id);

    //if not found, create, add and fetch
    if(!contact) {
      contact = new App.Models.Contact({id:id});
      this.contactCollection.add(contact);
      contact.fetch().done(function() {
        vent.trigger('contact:edit', contact);
      });
    } else {
      vent.trigger('contact:edit', contact);
    }
  }
});

请注意，这只是示例代码，不一定是您应该如何逐行实现它。您应该考虑在视图中显示一个潜在过时的模型是否可行，或者是否应该从服务器中获取它。实际上，您也可以在一个好的类中抽象集合状态，而不是直接在路由器中处理它

希望这能回答您的问题。
在您的
editContact
方法中，参数
contact
指的是从路由器向前传递的
id
。当您使用
new App.Views.EditContact（{model:contact}）
初始化新视图时，视图的模型应该是id

您需要将id映射到模型实例中。我认为正确的位置是在路由器中：

editContact: function (id) {
    var contact = new App.Models.Contact({id:id});
    vent.trigger('contact:edit', contact);
}

请注意，此时模型将仅设置
id
属性。如果需要填充模型属性进行编辑，则应从服务器中获取模型，然后触发事件：

editContact: function (id) {
    var contact = new App.Models.Contact({id:id});
    contact.fetch().done(function() {
      vent.trigger('contact:edit', contact);
    });
}

根据评论编辑：一般来说，您不应该将任何内容传递给路由器。路由器应该是每个新请求（url更改）的起点。如果希望在页面更改之间保持某种状态，则应将数据存储在路由器级别，并从视图中“向下”传递模型和集合

在一个简化的场景中，这意味着在路由器中初始化并存储对集合的引用。比如：

var Router = Backbone.Router.extend({
  initialize: function() {
    this.contactCollection = new App.Collections.Contacts();
  },

  editContact: function (id) {
    id = parseInt(id, 10);
    if(_.isNaN(id)) {
      //error...
    }
    //try to get a model from the collection
    var contact = this.contactCollection.get(id);

    //if not found, create, add and fetch
    if(!contact) {
      contact = new App.Models.Contact({id:id});
      this.contactCollection.add(contact);
      contact.fetch().done(function() {
        vent.trigger('contact:edit', contact);
      });
    } else {
      vent.trigger('contact:edit', contact);
    }
  }
});

请注意，这只是示例代码，不一定是您应该如何逐行实现它。您应该考虑在视图中显示一个潜在过时的模型是否可行，或者是否应该从服务器中获取它。实际上，您也可以在一个好的类中抽象集合状态，而不是直接在路由器中处理它

希望这能回答您的问题。
我正在使用上面的第二个代码。但它给了我这个错误
未捕获错误：必须指定“url”属性或函数。我在哪里可以指定
url
？我正在使用urlRoot:'/contacts'，但它仍然给出相同的错误。是否有其他方法可以实现这一点？@x4ph4r，如果指定
urlRoot
无效，则可能存在其他错误，应予以修复。您是像我的示例中那样使用
new
创建模型，还是从集合中获取/添加到集合中？如果模型是集合的一部分，那么应该使用
collection.url
。你的意思是我需要像这样创建一个新的集合实例
var contact=new App.Collections.Contacts（{id:id}）
？我正在使用上面的第二个代码。但它给了我这个错误
未捕获错误：必须指定“url”属性或函数。我在哪里可以指定
url
？我正在使用urlRoot:'/contacts'，但它仍然给出相同的错误。是否有其他方法可以实现这一点？@x4ph4r，如果指定
urlRoot
无效，则可能存在其他错误，应予以修复。您是像我的示例中那样使用
new
创建模型，还是从集合中获取/添加到集合中？如果模型是集合的一部分，那么应该使用
collection.url
。你的意思是我需要创建一个新的