1

设想

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

问题

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

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

event现在在上面听完initialize函数后，我正在调用editContact函数，我也在传递modelusingthis关键字。在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'
});
4

1 回答 1

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

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

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

希望这能回答你的问题。

于 2013-02-03T11:17:54.803 回答