html - 在视图内渲染子视图会创建一个额外的 div

Question

我有一个主干视图，称为容器

ContainerView = Backbone.View.extend({
    template: _.template($('#containerTmpl').html()),
    //this.$el.append(subview.render().el);
}

然后有一个子视图

PictureView = Backbone.View.extend({
    template: _.template($('#photoTmpl').html())
}

我的模板如下所示：

<script type="text/template" id="containerTmpl">
  <div id="container">
  </div>
</script>

<script type="text/template" id="photoTmpl">
  <div class="photo-container">
    <img src="<?- url ?>" alt="" />
  </div>
</script>

当它实际呈现在页面上时，我看到创建了一个额外的 Div，我的结构如下所示：

<div id="container">
    <div>     <!--Where is this extra div coming from??? -->      
        <div class="photo-container">
            <img/>
        </div>
    </div>
</div>

Answer 1

如果您不想将所有内容保存在 div 元素下，则必须声明每个视图的 tagName。

对不起，我会纠正这个。应该是这样的：

就像是：

Picture = Backbone.View.extend({
    template: _.template($('#photoTmpl').html()),
    tagName: 'div',
    className: 'photo-container'
});

和模板

<script type="text/template" id="photoTmpl">
    <img src="<?- url ?>" alt="" />
</script>

希望能帮助到你