无法获取要渲染的主干视图

Question

我遍历一个集合，试图在每个循环中向表中添加一行。这是循环集合并构建单个视图的代码，

App.Views.OrganisationMembersTab = Backbone.View.extend({

el: '#members',

template: _.template( $('#tpl-members-tab-panel').html() ),

events: {

},

initialize: function() {
    this.$el.html( this.template() );
    this.render();
},

render: function() {
    this.addAll();
},

addAll: function() {
    this.collection.each( this.addOne, this);
},

addOne: function(model) {
    console.log(model);
    var tableRow = new App.Views.OrganisationsMemberRow({
        model: model
    });
    tableRow.render();
}

});

被调用来构建行的单个视图如下所示，

App.Views.OrganisationsMemberRow = Backbone.View.extend({

    el: '.members-list tbody',

    template: _.template($('#tpl-organisation-member-row').html() ),

    events: {

    },

    initialize: function() {

    },

    render: function() {

        this.$el.prepend( this.template({
            member: this.model.toJSON()
        }));

        return this;
    }

});

使用toJSON() 将其解析为 JSON 后使用的模型如下所示，

email: "john.doe@email.com"  
first_name: "John"  
last_name: "Doe"  

该行的模板如下所示，

<script type="text/template" id="tpl-members-tab-panel">

    <table class="table table-striped members-list">

        <thead> 

            <tr>
                <th>A</th>
                <th>B</th>
                <th>C</th>
                <th>D</th>
            </tr>

        </thead>

        <tbody>
            <tr>
                <td colspan="4"><button class="btn btn-success btn-sm pull-right">Add &plus;</button></td>
            </tr>
        </tbody>

    </table>

</script>

上面构建了主要的表格组件，下一个模板实际上是针对一个数据行的。

<script type="text/template" id="tpl-organisation-member-row">
    <tr>
        <td>#</td>  
        <td><%= first_name %> <%= last_name %></td>
        <td>Admin <input type="checkbox" /></td>
        <td>Remove</td>
    </tr>

</script>

我在主表中得到所有输出，然后在主表中我得到任何前置或空的 <tr> 这是为什么？

Answer 1

问题在于您的模板没有使用member 属性，而是使用整个模型。

你需要替换

    this.$el.prepend( this.template({
        member: this.model.toJSON()
    }));

与

    this.$el.prepend( this.template(
        this.model.toJSON()
    ));

working example

Answer 2

您当前的实现有点混乱。您的行视图没有tagName，因此默认情况下您会将divs 附加到您的tbody。

我要做的第一件事是从你的tpl-organisation-member-row 模板中取出<tr> 标签，然后像这样改变你的行视图：

App.Views.OrganisationsMemberRow = Backbone.View.extend({

    tagName: 'tr',

    template: _.template($('#tpl-organisation-member-row').html() ),

    render: function() {
       this.$el.html(this.template(this.model.toJSON()));
       return this;
    }
});

成员行模板：

<script type="text/template" id="tpl-organisation-member-row">
        <td>#</td>  
        <td><%= first_name %> <%= last_name %></td>
        <td>Admin <input type="checkbox" /></td>
        <td>Remove</td>
</script>

然后我更愿意控制从您的App.Views.OrganisationMembersTab 视图中追加行。因此，在您的 addOne 方法中执行以下操作：

addOne: function(){
    var tableRow = new App.Views.OrganisationsMemberRow({
        model: model
    });
    this.$('tbody').append(tableRow.render().el);
}