Использование магистральных событий в представлениях, еще не добавленных в DOM - проблема рендеринга - PullRequest
Новая
       4

Использование магистральных событий в представлениях, еще не добавленных в DOM - проблема рендеринга

1 голос
/ 28 августа 2011

Короткая история ... У меня есть вложенные представления, но только события верхнего уровня могут работать с событиями, потому что я передаю только свойство '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>

Может быть несколько поисков и, следовательно, несколько поисковых групп в год.Каждая 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().

Все это означает, что мои вложенные представления неЯ не получаю никаких событий, потому что у них нет контейнера div, переданного с использованием атрибута 'el'.У них нет контейнера, потому что он отображается после того, как все представления построены (см. Первый блок кода).

Мое текущее решение состоит в том, чтобы использовать глобальный EventManger, который можно использовать в качестве обработчика событий для уведомления представлений, когдапредставление верхнего уровня вызывает eventManger.trigger (..).Это не идеально.

Должно ли быть решение, позволяющее моим вложенным представлениям отслеживать события после их отображения?Или мне нужно предварительно визуализировать шаблон представления верхнего уровня и указать атрибуты el, такие как {el: '.year.yearID-1984'} и {el: '.searchGroup.groupID-6'} ??

В идеале я мог бы визуализировать sg.viewEl, а не просто вывод html из этого объекта, и представление тогда само знало бы, где оно находится. ... но я знаю, что это невозможно: (

Заранее спасибо. Надеюсь, это понятно.

1 Ответ

2 голосов
/ 29 августа 2011

Я реализовал правильное решение, близкое к тому, что было описано в моем вопросе ... 

//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").

Я предполагаю, что тогда это будет то же самое, что и установка свойства view el в initучитывая, что я знаю идентификатор, на котором он основан.Это предполагает, что магистраль использует .live (..) для поиска el: ".nid-1234" DOM ​​obj.

...