1

我正在使用路由器进行导航和布局管理（对吗！？）并且似乎遇到了一个问题：

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

我单击一个将应用程序导航回“主页”功能的元素（单击事件触发正常），但“this.itemsView”的内容似乎从未放回“this.content”div。任何人都可以在这里发现任何问题吗？

作为另一个巨大的帮助，如果有人可以对他们在这里看到的任何东西提供任何整体的 BackboneJS 智慧，那么这将是一个巨大的帮助。

4

1 回答 1

2

通常，在 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);
},
于 2012-11-29T11:50:14.157 回答