Javascript Backbone.js将子视图元素添加到父视图'；s元素

我有一个集合视图和一个模型视图，如下所示：

EventListView
|-- EventView

EventListView

必须以一对多关系显示多个

eventview

。我正在使用下划线

\uuu.template（）

函数来构建我的视图模板

这是我的

EventView

模板：

<h1>
    <span class="date"><%= prefix %><%= dateString %></span>
    <span class="title"><%= title %></span>
</h1>
<div class="caption"><%= caption %></div>

<h1>
    <% if(typeof(title) != "undefined") { print(title) } %>
</h1>
<%= events %>

这是我的

EventListView

模板：

<h1>
    <span class="date"><%= prefix %><%= dateString %></span>
    <span class="title"><%= title %></span>
</h1>
<div class="caption"><%= caption %></div>

<h1>
    <% if(typeof(title) != "undefined") { print(title) } %>
</h1>
<%= events %>

我遇到的问题是，

eventView.$el.html（）

只包含模板中的html，但我需要利用主干视图支持的

标记名

、

类名

和

id

属性

考虑一下，如果我这样设置

EventView

：

return Backbone.View.extend({

    model: EventModel
,   tagName: 'article'
,   className: 'event'  
,   template: _.template(templateText)

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

我想插入：

<article class="event" id="someID342">
    <h1>
       <span class="date">01/02/2010</span>
       <span class="title"></span>
       <div class="caption></div>
    </h1>
</article>

如何插入整个

eventView

元素？不仅仅是

innerHTML

，

render（）

函数不应该负责处理

视图.el的设置。这是通过在初始化视图时调用的
\u ensureElement
函数中的
主干线
完成的

此外，该函数只应返回所选元素的内容。
只需在EvenListView的模板中保留占位符即可

<h1><%- title %></h1>
<div class="js-events"></div>

您有很多选择，但我认为最灵活和可持续的方法是让每个子视图定义自己的模板。父视图只是附加子元素
.el
属性

这种方法的优点是，模板只编译一次。对子元素的更新不需要重新渲染父元素和相邻元素

这是一个

例子：
var ContainerView=Backbone.View.extend({
标记名：“文章”，
类名：“事件”，
id:“someID342”，
初始化：函数（选项）{
//现在将呈现该模板
this.childView=new childView（）
//渲染的子视图现在将显示在父视图中
this.el.appendChild（this.childView.el）
}
})
var ChildView=Backbone.View.extend({
标记名：“h1”，
日期字符串：“01/02/2010”，
前缀：“日期：”，
描述：“多么美妙的约会啊！”，
标题：“我是一个标题”，
模板：\ u0.template([
'',
'',
'',
'',
''
].加入（“”），
初始化：函数（）{
this.render（）
},
render:function（）{
//因为您只是在修改innerHTML
//不需要在父视图中重新结束子视图
this.el.innerHTML=this.template（this）
}
})

我个人警告不要在主干中使用模板。我发现，只需为应用程序的每个组件提供一个主干视图，以后编辑起来就容易多了。共享模板比共享视图困难得多。当然，这取决于项目的要求。
渲染函数只是用来在页面上绘制它，我知道
$.fn.html（）
返回内容，但我要问的是如何绘制整个内容。渲染函数所做的只是获取模板，对其求值并绘制它。所有我只想在渲染时发生的事情。
<h1><%- title %></h1>
<div class="js-events"></div>

render: function() {
    this.$el.html(this.template({title: 'Title'}));
    this.$events = this.$('.js-events');
    _.each(this._EventViews, function (eventView) {
        this.$events.append(eventView.render().$el);
    }, this);
    return this;
}