与backbonejs路由器有问题

Question

场景

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

问题

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

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

现在在上面听完initialize 函数中的event 之后，我正在调用editContact 函数，并且我还使用this 关键字传递model。在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 内的渲染函数，以便它开始工作？

更新

这是我的模型

App.Models.Contact = Backbone.Model.extend({
    urlRoot : '/contacts'
});

Answer 1

在您的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 属性。如果您需要填充模型属性进行编辑，您应该从服务器fetch 模型，然后才触发事件：

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

基于 cmets 编辑：一般来说，您不应该将任何内容传递给路由器。路由器应该是每个新请求（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);
    }
  }
});

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

希望这能回答您的问题。