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

现在在听event函数中的initialize后，我正在调用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 })初始化新视图时，视图的模型将是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);
    });
}

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

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

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

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

希望这能回答你的问题。

与backbonejs路由器有问题

1 个答案: