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>

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

Answer 1

您当前的实施有点困惑。您的行视图没有tagName，因此默认情况下，您将div添加到tbody。

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

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

Answer 2

问题在于您的模板不使用member属性，只需使用整个模型。

您需要更换

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

与

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

working example

无法获取骨干视图进行渲染

2 个答案: