在尚未添加到 DOM 的视图上使用主干事件 - 渲染问题答案

【问题标题】：Using backbone events on views not yet added to the DOM - rendering issue在尚未添加到 DOM 的视图上使用主干事件 - 渲染问题
【发布时间】：2011-08-28 17:00:10
【问题描述】：

简短的故事...我有嵌套视图，但只有顶层视图可以处理事件，因为我只是将“el”属性传递给顶层视图。

说来话长……

我正在创建一个使用主干作为 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 作为每个搜索结果的包装器。

下面是来自循环的代码 sn-p，它创建 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().

所有这一切意味着我的嵌套视图不会收到任何事件，因为它们没有使用“el”属性传入的容器 div。它们没有容器，因为它是在构建所有视图之后呈现的（参见第一个代码块）。

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

必须有一个解决方案允许我的嵌套视图在事件被渲染后获取它们？还是我需要预渲染顶级视图模板并指定 el 属性，例如 {el: '.year.yearID-1984'} 和 {el: '.searchGroup.groupID-6'} ？？

理想情况下，我可以渲染 sg.viewEl 而不仅仅是该对象的 html 输出，然后视图会自己知道它在哪里。 ...但我知道这是不可能的 :(

提前致谢。希望这很清楚。

【问题讨论】：

标签： javascript javascript-events backbone.js

【解决方案1】：

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

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

渲染顶层视图后，我接着调用：

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

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

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 上设置 view el 属性相同，因为我知道它所基于的 id。这假设主干使用 .live(..) 来查找 el: ".nid-1234" DOM obj。

【讨论】：