javascript - 与backbonejs路由器有问题

Question

场景

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

问题

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

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 函数，并且还传递 model 使用 this 关键字。在 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 }) 初始化新 View 时， View 的模型将按预期为 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 更改)的起点。如果您想在页面更改之间保留某些状态，则应该将数据存储在路由器级别，并从 View “向下”传递模型和集合。

在简化的场景中，这意味着初始化并存储对路由器中集合的引用。像这样的东西:

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

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

希望这能解答您的问题。