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