Блог

Я совсем новичок в Meteor, и у меня возникают проблемы при попытке понять «визуализированное» событие в шаблонах.

Предполагая, что у меня есть эти два шаблона:

 <template name="parent">    
    <div id="list">
        {{#each childs}}
            {{> child}}
        {{/each}}
    </div>
</template>

<template name="child">
    <div class="item">
        <!-- content -->
    </div>
</template>
  

и эти два события:

 Template.parent.rendered = function () {
    console.log('parent');
};

Template.child.rendered = function () {
    console.log('child');
};
  

Я всегда получаю это из консоли:

> родительский
> дочерний
> дочерний
> дочерний

Таким образом, в основном родительский шаблон запускает «визуализацию» до завершения визуализации внутренних шаблонов. Из-за этого я не могу выполнить какие-либо post-операции с DOM, такие как плагины jquery. например:

 Template.parent.rendered = function () {
    $('#list').myplugin();
};
  

Поскольку это выполняется до отображения внутренних шаблонов, это нарушает работу плагина.

Есть ли обходной путь или событие meteor, которое я могу безопасно использовать сейчас, когда шаблон полностью отрисован, включая его внутренние шаблоны?

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

Трудно дать точный ответ, не зная более подробной информации о том, что делает ваш плагин, но я могу привести пример из одного из моих приложений:

Я должен был убедиться, что все дочерние элементы были того же роста, что и самый высокий дочерний элемент. Моей первоначальной реакцией было то, что мне пришлось каким-то образом дождаться завершения рендеринга всех дочерних элементов, а затем один раз отрегулировать их высоту. Более простым решением было просто изменять размер всех из них каждый раз, когда какой-либо из них отображался. Конечно, это O (N ^ 2) сравнений, но это все равно быстро для небольшого списка и работает даже при добавлении новых дочерних шаблонов.

Обратите внимание, что если вам абсолютно необходимо было вызвать плагин один раз, и никакие новые дочерние элементы не могли быть добавлены позже, вы могли бы попробовать уродливый взлом для инициализации плагина только после того, как все они были отрисованы. Например:

 Template.child.rendered = function () {
  if ($('.child').length === Children.find().count()) {
    $('#list').myplugin();
  }
};