Блог

Допустим, у меня есть элемент Polymer x-foo , который использует шаблоны для привязки данных.

 <template>
  <!--shadow DOM-->
  <template repeat='{{item in items}}'>
    <div class='content'>{{item}}</div>
  </template>
</template>
  

items это свойство x-foo , которое определяет, что присутствует в представлении.

Теперь, на лету в одном из методов x-foo , которые я делаю:

 this.items = getNewItemList();
  

а затем попытайтесь получить доступ к содержимому shadow DOM,

 this.shadowRoot.querySelectorAll('.content') // was supposed to return 5 elements
  

Я обнаружил, что Polymer все еще не прошел цикл шаблона и не сгенерировал содержимое моего теневого DOM. Есть ли способ узнать, когда он его закончил?

По замыслу, Polymer ожидает, пока ваш JavaScript не завершит обработку, прежде чем делать дорогостоящие вещи, такие как возня с DOM. Таким образом, вы можете выполнять несколько операций одновременно и не беспокоиться о том, что DOM будет перегружен и замедлит работу вашего приложения.

Короткий ответ на ваш вопрос — сделать что-то вроде этого:

 this.items = getNewItemList();
this.async(
  // `async` lets the main loop resume and perform tasks, like DOM updates,
  // then it calls your callback 
  function() {
    this.contents = this.shadowRoot.querySelectorAll('.content'); 
  }
);
  

Лучший ответ — избежать необходимости запрашивать элементы. Вместо этого позвольте элементам взаимодействовать с контейнером через события или даже с использованием объектов «item» (модель данных). Если вы сможете управлять своим пользовательским интерфейсом из своей модели данных, а не наоборот, у вас будет лучшее время.