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

【问题标题】：Rendering subview inside view creates an extra div在视图内渲染子视图会创建一个额外的 div
【发布时间】：2013-04-16 20:26:26
【问题描述】：

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

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>

【问题讨论】：

类似stackoverflow.com/questions/11594961/… ?
解决方案见上面的评论。额外的div 元素背后的原因是，如果您在实例化视图时不给它一个元素，Backbone 将自动创建一个元素。默认类型是div 元素，你有一个额外的。
能否提供示例代码以便我接受

标签： html templates backbone.js underscore.js backbone-views

【解决方案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>

希望对你有帮助

【讨论】：