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>

希望有所帮助

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

1 个答案: