简短的故事...我有嵌套的视图,但只有顶级视图可以处理事件,因为我只将“el”属性传递给顶级视图。
说来话长...
我正在创建一个时间轴项目,使用backbone作为JS/GUI客户端应用程序。我的水平时间轴渲染模板如下:
<script type="text/template" id="yearGroups">
<![CDATA[
<% _.each(columns, function(item,i) { %>
<div class="yearGroup">
<h2><%= item.yearLabel %></h2>
<div class="years">
<% _.each(item.years, function(year, b) { %>
<div class="year">
<% _.each(year.searchGroups, function(sg, sg_index) { %>
<%= jQuery(sg.viewEl).html() %>
<% }); %>
</div>
<% }); %>
</div>
</div>
<% }); %>
]]>
</script>
可以有多个搜索,因此每年可以有多个searchGroups
。每个searchGroup
包含eventBlocks
作为每个搜索结果的 Package 器。
下面是创建SearchGroupViews
的循环的代码片段(此处未显示该循环创建的eventBlocks
)。
var events = eventCollection.getEventsInYear(year);
if(events.length > 0) {
var sgv = new SearchGroupView({results: events, searchID: 'search1'});
this.searchGroups.push(sgv);
renderedResults.push({viewEl:sgv.render().el});
}
renderedResults
最终传递到模板,如下所示:
$(this.el).html(this.template({columns:col}));
......并在每年提交,使用:
jQuery(sg.viewEl).html().
所有这些都意味着我的嵌套视图不会接收到任何事件,因为它们没有使用'el'属性传入容器div。它们没有容器,因为容器是在构建所有视图之后呈现的(参见第一个代码块)。
我目前的解决方案是使用一个全局eventManager
,当顶级视图调用eventManger.trigger(..)
时,它可以用作事件处理程序来通知视图。
必须有一个解决方案,允许我的嵌套视图在事件呈现后拾取它们?或者我需要预先呈现顶级视图模板并指定el属性,如{el: '.year.yearID-1984'}
和{el: '.searchGroup.groupID-6'}
?
理想情况下,我可以呈现sg.viewEl
,而不仅仅是该对象的html输出,然后视图会自己知道它在哪里。...但我知道这是不可能的:(
希望这一点是明确的。
1条答案
按热度按时间qgelzfjb1#
我实施了一个与我的问题中描述的内容接近的OK解决方案...
在渲染顶级视图之后,我接着调用:
然后,在每个视图init函数中捕获此事件......。
...以便视图可以更新el属性。这都依赖于用于查找el的唯一类名(例如,class=“nid-1234”)。
我猜这和在init上设置视图el属性是一样的,因为我知道它所基于的id。“.nid-1234”DOM对象