javascript - 在尚未添加到 DOM 的 View 上使用主干事件 - 呈现问题

Question

短篇小说......我有嵌套 View ，但只有顶层 View 可以处理事件，因为我只将“el”属性传递给顶层 View 。

说来话长...

我正在创建一个时间轴项目，使用 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 作为每个搜索结果的包装器。

下面是创建 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}));

... 并在每个 .year 下使用:

jQuery(sg.viewEl).html().

所有这些都意味着我的嵌套 View 没有收到任何事件，因为它们没有使用“el”属性传入的容器 div。它们没有容器，因为容器是在构建完所有 View 后呈现的(参见第一个代码块)。

我目前的解决方案是使用全局 eventManager，它可以用作事件处理程序，在顶级 View 调用 eventManger.trigger(..) 时通知 View >。这并不理想。

必须有一个解决方案可以让我的嵌套 View 在事件呈现后获取它们吗？或者我是否需要预渲染顶级 View 模板并指定 el 属性，如 {el: '.year.yearID-1984'} 和 {el: '.searchGroup.groupID- 6'}?

理想情况下，我可以呈现 sg.viewEl 而不仅仅是该对象的 html 输出，然后 View 会自行知道它在哪里。 ... 但是我知道那是不可能的:(

希望这是清楚的。

Answer 1

我实现了一个与我的问题中描述的接近的解决方案......

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

渲染顶层 View 后，我调用:

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

然后在每个 View 初始化函数中捕获此事件....

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();
});

...以便 View 可以更新 el 属性。这一切都依赖于用于查找 el 的唯一类名(例如，class="nid-1234")。

我猜这与在 init 上设置 view el 属性是一样的，因为我知道它所基于的 id。这假设 backbone 使用 .live(..) 来查找 el: ".nid-1234"DOM obj。