Question

我正在使用路由器进行导航和布局管理（就是这样！？）并且似乎遇到了问题：

backboneQuote.Routers.ApplicationRouter = Backbone.Router.extend({

routes: {
    "" : "home",
    "edit/:id": "quoteEdit"
},

initialize: function(){
    this.headerView = new backboneQuote.Views.headerView();
    $('.header').html(this.headerView.render().el);

    if(!this.itemsView){
        this.items = new backboneQuote.Collections.ApplicationCollection([
            {id: 1, name: "item 1"},
            {id: 2, name: "item 2"},
            {id: 3, name: "item 3"}
        ]);

        this.itemsView = new backboneQuote.Views.itemsView({collection: this.items});
    }
    this.content = $('.container');
},

home: function(){

    this.content.html(this.itemsView.render());

},

quoteEdit: function(id){
    this.editQuoteView = new backboneQuote.Views.editQuoteView({model: this.items.where({id: parseInt(id, 10)})});
    $('#editQuote').html(this.editQuoteView.render().el);
    this.content.html($('#editQuote').html());
}

}）;

我的itemsView渲染内容：

renderItem: function(model){
    var itemView = new backboneQuote.Views.itemView({model: model});
    itemView.render();
    $(this.el).append(itemView.el);
    return this;
},

render: function(){
    this.collection.each(this.renderItem);
},

我点击了一个将应用程序导航回“home”函数的元素（click事件正好点火），但是“this.itemsView”的内容似乎永远不会被放回到“this.content”div中。谁能在这里发现任何错误？

作为另一个巨大的帮助，如果有人能够在他们看到的任何内容上提供任何整体的BackboneJS智慧，那么这将是大量的帮助。

Answer 1

通常，在Backbone应用程序中，我们编写render方法来设置视图el的内容。调用render的代码负责确保el显示在正确的位置。

在路由器中，

home: function(){

    this.content.html(this.itemsView.render());

},

您没有访问.el媒体资源。第一个修复是在那里添加。

home: function(){

    this.itemsView.render();
    this.content.html(this.itemsView.el);

},

这假设您的集合视图具有el属性，默认情况下Backbone视图通常具有该属性。

考虑到这是一项常见任务，惯例是在每个视图this方法的末尾返回render。

render: function(){
    this.collection.each(this.renderItem);
    return this;
 },

home: function(){
    this.content.html(this.itemsView.render().el);
},

骨干div没有被重新粉刷

1 个答案: