Question

我正在使用BackboneJS处理网页。 HTML页面包含两个div作为列，每个项目都在第一列，在第二列。我不确定如何在集合视图上设置el元素。目前我在集合render函数中以dinamically方式设置它，但由于某种原因，在右列中创建了更多项（div）。这是代码。难道我做错了什么？有更好的方法吗？

HTML片段：

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

Backbone视图应该在col1和col2 div上分发项目，所以我不能像往常一样在集合视图中设置el，我必须以某种方式动态设置它。 / p>

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

Backbone - 在渲染函数中设置el？

1 个答案: