在尚未添加到DOM的视图上使用 Backbone.js 事件-呈现问题

3vpjnl9f  于 2022-11-10  发布在  其他
关注(0)|答案(1)|浏览(120)

简短的故事...我有嵌套的视图,但只有顶级视图可以处理事件,因为我只将“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输出,然后视图会自己知道它在哪里。...但我知道这是不可能的:(

希望这一点是明确的。

qgelzfjb

qgelzfjb1#

我实施了一个与我的问题中描述的内容接近的OK解决方案...

//global event notifier system
window.vent = _.extend({}, Backbone.Events);
window.app = new TimelineRouter();

在渲染顶级视图之后,我接着调用:

window.vent.trigger('ev:redelegate', {});

然后,在每个视图init函数中捕获此事件......。

this.model.view = this;
var _this = this;

window.vent.bind('ev:redelegate', function(event) {
   var nid = _this.model.get('nid');
   _this.el = $('.nid-'+nid);

   _this.delegateEvents();
});

...以便视图可以更新el属性。这都依赖于用于查找el的唯一类名(例如,class=“nid-1234”)。
我猜这和在init上设置视图el属性是一样的,因为我知道它所基于的id。“.nid-1234”DOM对象

相关问题