如何将主干集合呈现为两个视图

时间:2013-08-27 15:03:20

标签: backbone.js backbone-views backbone-events

我正在使用twitter bootstrap链接。当用户单击链接时,将显示引导模式。 现在因为模态渲染中的一些引导技术困难,我需要分离链接并将模态放出导航栏div。

所以考虑我有两个单独的div

                      <div id="linkDiv">

                      </div>

                      <div id="modalDiv">

                      </div>

现在我只有一个View调用服务器来获取集合

app.View.FriendRequestListView = Backbone.View.extend( {
templateModalLink: _.template($('#link').html()),
templateModal: _.template($('#modal').html()),

tagName: 'div',

initialize: function(){
    this.friendRequestCollection = new app.Collection.FriendRequestCollection();
    this.friendRequestCollection.bind("reset", this.render, this);
    this.friendRequestCollection.fetch();
},

render: function() {
    $(this.el).html(this.templateModalLink({
        friendRequestCollection: this.friendRequestCollection}));
    return $(this.el);
},
 });

我可以只渲染一个div,如下面的

var list = new app.View.FriendRequestListView();
  $('#linkDiv').html(list.$el);

我的问题是,是否可以同时渲染两个模板并将两个模板添加到不同的DIV中,例如在我的情况下我希望获得更新 templateModalLink模板将linkDiv和templateModal模板与我从服务器获取的集合转换为modalDiv。

1 个答案:

答案 0 :(得分:0)

您必须在app.View.FriendRequestListView(s)之前实例化该集合,并将app.View.FriendRequestListView(s)传递给该集合:

var friendRequests = new app.Collection.FriendRequestCollection();
friendRequests.fetch(
    success: function(collection, response, options) {
        var list1 = new app.View.FriendRequestListView({collection: collection});
        var list2 = new app.View.FriendRequestListView({collection: collection});

        $('#linkDiv').html(list1.$el);
        $('#modalDiv').html(list2.$el);
    }
);