Backbone - 在渲染函數中設置el？

Question

我正在使用BackboneJS在網頁上工作。 HTML頁面包含2個div，它們充當列，每個項目將位於第一列，或者位於第二列。我不知道如何在集合視圖上設置el元素。目前，我在收集render函數中設置了它，但由於某些原因，在右列中創建了更多項目（div）。這是代碼。難道我做錯了什麼？有更好的方法嗎？

HTML片段：

<div class="columns" id="col1"></div> 
<div class="columns" id="col2"></div> 

的骨幹視圖應該在兩個col1和col2的div分配的項目，所以我不能設置el在集合視圖像往常一樣，我要動態地設置它在某種程度上。

這裏是MenusView收集相應的視圖：

var application = application || {}; 

application.MenusView = Backbone.View.extend({ 
//el: '#col1', 

initialize: function(initialmenus) { 
    console.log("Initializaing MenusView"); 
    this.collection = new application.Menus(initialmenus); 
    this.render(); 
}, 

render: function() { 
    var count = true; 
    this.collection.each(function(item) { 
     //setting el dynamically at rendering, so we can distribute divs to col1 and col2 
     this.setElement($('#col' + (count ? '1' : '2'))); 
     count = !count; 
     this.renderMenu(item); 
    }, this); 
}, 

renderMenu: function(item) { 
    var menuView = new application.MenuView({ 
     model: item 
    }); 
    this.$el.append(menuView.render().el); 
} 
}); 

Answer 1

這個怎麼樣？不要在渲染時動態修改父項，而是選擇要渲染的子DIV。

<div class="columnWrapper"> 
    <div class="columns"></div> 
    <div class="columns"></div> 
</div> 

var application = application || {}; 

application.MenusView = Backbone.View.extend({ 
// Your collection view's "el" is now the wrapper div 
el: "div.columnWrapper", 

initialize: function(initialmenus) { 
    console.log("Initializaing MenusView"); 
    this.collection = new application.Menus(initialmenus); 
    this.render(); 
}, 

render: function() { 
    var count = true; 
    this.collection.each(function(item) { 
     this.renderMenu(item, count); 

     count = !count; 
    }, this); 
}, 

renderMenu: function(item, count) { 
    var menuView = new application.MenuView({ 
     model: item 
    }); 
    var childIndex = count ? 1 : 2; 
    this.$(".columns:nth-child(" + childIndex + ")").append(menuView.render().el); 
} 
});