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

【问题标题】：How to render a backbone collection into two views如何将主干集合呈现为两个视图
【发布时间】：2013-08-27 15:03:20
【问题描述】：

我正在使用 twitter 引导链接。当用户单击链接时，会出现一个引导模式。现在由于模态渲染中的一些引导技术困难，我需要分离链接并将模态放在导航栏 div 中。

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

                      <div id="linkDiv">

                      </div>

和

                      <div id="modalDiv">

                      </div>

现在我只有一个视图，它调用服务器来获取集合

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 以及我从服务器获取的集合。

【问题讨论】：

能否详细说明一下

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

【解决方案1】：

您必须在 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);
    }
);

【讨论】：